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


Posted in Javascript onJanuary 10, 2017

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

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

网上搜索教程:

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

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
js中new一个对象的过程
Feb 20 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jquery 正整数数字校验正则表达式
Jan 10 #Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 #Javascript
JS遍历对象属性的方法示例
Jan 10 #Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 #Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 #Javascript
js实现背景图自适应窗口大小
Jan 10 #Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 #Javascript
You might like
php下的权限算法的实现
2007/04/28 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
详解python Todo清单实战
2018/11/01 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
接口可以包含哪些成员
2012/09/30 面试题
医学类导师推荐信范文
2013/11/19 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
学习考察心得体会
2014/09/04 职场文书
个人委托书范本
2014/09/13 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
团结友爱主题班会
2015/08/13 职场文书