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

2019-11-19 18:02:35

字体：大中小

来源：转载

供稿：网友

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.导包

代码如下：

<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>

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

上一篇：jQuery操作复选框(CheckBox)的取值赋值实现代码

下一篇：jquery 正整数数字校验正则表达式