官网 http://api.jqueryui.com/autocomplete/#option-source
参考了 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html 写的很好 大家去看看
首先要说明的是 如果在网上直接搜索 autocomplete 的话 会得到很多不同的插件
比如这个页面http://www.open-open.com/ajax/AutoComplete.htm 相同功能的插件有3页
我这里用的时 jQuery.ui 下的一个补全插件
下面用三种方式获取
一种是静态数据 一种是远程的写好的静态json格式数据 还有一种是后台根据输入的不同数据返回不同的值
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.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" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" /> </div> <div class="ui-wight"> <label for="jsonp">rakusTag</label> <input id="jsonp"/> 下面有指定参数 输入的字符最小是2个才开始传送数据 </div> <script type="text/javascript"> $(function(){ $("#jsonp").autocomplete({ source: function(request, response) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function(data) { response($.map(data.geonames, function(item) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); }, minLength: 2 }); }); </script> <div class="ui-wight"> <label for="find_group_ac">rakusTag</label> <input id="find_group_ac"/> </div> <script type="text/javascript"> $(function(){ $("#find_group_ac").autocomplete({ source: function(request, response) { $.ajax({ url: "autocomplete.php", dataType: "json", data: { term: request.term }, success: function(data) { response($.map(data.items, function(item) { return { label: item.name, value: item.name } })); } }); }, minLength: 1 }); }); </script> </body> </html>
后台
<?php $val=$_REQUEST['term']; $ret=""; function StartsWith($Haystack, $Needle){ return strpos($Haystack, $Needle) === 0; } if(StartsWith($val,'a')){ $ret="{"items":[{"name":"ACC","description":"desc"},{"name":"acm","description":"desc"},{"name":"array","description":"desc"}]}"; if(strpos($val,'ac')!==false){ // echo 'ac'; $ret="{"items":[{"name":"ACC","description":"desc"},{"name":"acm","description":"desc"}]}"; if(strpos($val,'acc')!==false){ // echo 'acc'; $ret="{"items":[{"name":"ACCR","description":"desc"},{"name":"according","description":"desc"}]}"; } } }else if(StartsWith($val,'b')){ $ret="{"items":[{"name":"base","description":"desc"},{"name":"bonni","description":"desc"},{"name":"boot","description":"desc"}]}"; }else if(StartsWith($val,'c')){ $ret="{"items":[{"name":"candy","description":"desc"},{"name":"clone","description":"desc"},{"name":"crocs","description":"desc"}]}"; }else { $ret=""; } echo $ret; ?>
最后送一个 检查json数据 是否正确的工具 http://jsonlint.com/