jQuery UI仿淘宝搜索下拉列表功能

jquery仿淘宝搜索下拉列表实现效果如下：

网上搜索教程：

<！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","Per高l","PHP","Python","Ruby","Scala","Sche高"]; $（ "#tags1" ）.autocomplete（{ source: availableTags}）; $（"#tags2"）.autocomplete（{ source: ["a", "b", "c"]}）; //页面加载$（"#tags3"）.autocomplete（{ source: DataSouce1（）}）;//数据库$（"#tags4"）.autocomplete（{ source: function（ request, response ） { var name=$.ui.autocomplete.escapeRegex（ request.term ）; response（ $.grep（ DataSouce2（name）, function（ item ）{return item; }） ）; }}）; //利用ajax页面加载就获取到数据源function DataSouce1（）{ var mycars=new Array（） for （var i = 0; i <100; i++） { mycars[i]="高"+i; }; return mycars;} //利用ajax根据输入的到数据库查找 相当于function DataSouce2（name）{ var mycars=new Array（） for （var i = 0; i <100; i++） { mycars[i]=name+"_"+i; }; return mycars;} }）; </script> </head> <body><div class="ui-widget"><label for="tags">Tags: </label><input id="tags1" /><input id="tags2" /><input id="tags3" /><input id="tags4" /></div> </body> </html>

使用第四种方法（tags4）实现：

注意：
1.要开启ajax的同步（true异步，false同步），即：async:false,
2.声明和返回的集合要写在 $.ajax（{}）之外！
3.导包
<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>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
代码如下：

<script type="text/javascript">$（"#querys"）.autocomplete（{ source: function（ request, response ） { var name=$.ui.autocomplete.escapeRegex（ request.term ）; response（ $.grep（ DataSouce（name）, function（ item ）{return item; }） ）; }}）;function DataSouce（name）{ var querylist=new Array（）;$.ajax（{ type: "get", data:{q:name},url:"query", dataType:"json",contentType: "application/json", async:false, success:function（data）{$（data.data.searchPOJOList）.each（function（i）{querylist[i]=data.data.searchPOJOList[i].goodsName;}）} }） return querylist;}</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。