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>

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

赞 (0)

相关推荐

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

  • jquery 操作单选框，复选框，下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码 代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1)  浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)

  • 基于jquery的可多选的下拉列表框

    同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个. 先看效果: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html JS: 复制代码 代码如下: (function ($) { $.fn.extend({ MultDropList: function (options) { var op = $.extend({ wraperClass: "

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • JQuery实现鼠标滑过显示导航下拉列表

    当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="

  • 利用jquery操作select下拉列表框的代码

    例: 复制代码 代码如下: <select id="sltList" name="list"> <option value="1">张三</option> <option value="2">李四</option> </select> // 获取当前选中的option值 $('#sltList').val() //获取当前选中项的文本 $('#sltLis

  • jQuery 操作下拉列表框实现代码

    <select name="select1" id="select1" size="10"> <option value="1">Option1</option> <option valeu="2">Option2</option> <option value="3">Option3</option> &

  • jQuery 文本框模拟下拉列表效果

    jQuery 文本框模拟下拉列表效果

    网页代码如下: New Web Project $(document).ready(function(){ $('#test').val(''); //定义一个下拉按钮层,并配置样式(位置,定位点坐标,大小,背景图片,Z轴),追加到文本框后面 $DIV = $(' ').css('position', 'absolute').css('left', $('#test').position().left + $('#test').width() - 15 + 'px').css('top', $(

随机推荐