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 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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购物网站支付paypal使用方法
2010/11/28 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
php中请求url的五种方法总结
2017/07/13 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Django数据库表反向生成实例解析
2018/02/06 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
电焊工岗位职责
2014/03/06 职场文书
车辆年检委托书范本
2014/10/14 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android