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的变量的数据类型的判断方法
Aug 14 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
yii用户注册表单验证实例
2015/12/26 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
销售总监岗位职责
2014/01/04 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
撤诉书怎么写
2015/05/19 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android