智能提示 autocomplete
<!doctype html><html lang="us"><head><meta charset="utf-8"><title>jQuery UI Example Page</title><link href="css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet"><script src="js/jquery-1.9.1.js"></script><script src="js/jquery-ui-1.10.3.custom.min.js"></script><script>$(function() {//第一种方式先把数据传过来var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];$( "#autocomplete" ).autocomplete({source: availableTags});//第二种方式ajax获取 var cache = {};//缓存 $( "#cause" ).autocomplete({//autocomplete插件 content:{}, source: function(request, response ) { var term = request.term; if ( term in cache ) { response( $.map( cache[ term ], function( item ) { return item.content; })); return ; } $.ajax({ url: "${path}/cause/ajaxSearch.do", dataType: "json", data:"type="+$("#type").val()+"&content="+request.term+"&date="+new Date(), success: function( data ) { cache[ term ] = data; response( $.map( data, function( item ) { return item.content; })); } }); } });});</script></head><body> <div><input id="autocomplete" ><input id="cause" name="cause" style="width:425px;"></div></body></html>