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 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
javascript实现评分功能
2020/06/24 Javascript
vue实现放大镜效果
2020/09/17 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python监控进程脚本
2018/04/12 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
园艺师求职信
2014/03/10 职场文书
村级换届选举方案
2014/05/10 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
如何写好闭幕词
2019/04/02 职场文书
创业计划书之家教托管
2019/09/25 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android