jQueryUI如何仿淘宝实现搜索下拉列表功能-创新互联

这篇文章主要为大家展示了“jQuery UI如何仿淘宝实现搜索下拉列表功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery UI如何仿淘宝实现搜索下拉列表功能”这篇文章吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名、虚拟空间、营销软件、网站建设、安阳网站维护、网站推广。

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

jQuery UI如何仿淘宝实现搜索下拉列表功能

网上搜索教程:

 
 
 
 
  
 jQuery UI Autocomplete - Default functionality 
  
  
  
 
  
 
 
  
 Tags:  
  
  
  
  
 
   

使用第四种方法(tags4)实现:

注意:1.要开启ajax的同步(true异步,false同步),即:async:false,
2.声明和返回的集合要写在  $.ajax({})之外!
3.导包


 
 

代码如下:

 
         $("#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; 
         }  
      

以上是“jQuery UI如何仿淘宝实现搜索下拉列表功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:jQueryUI如何仿淘宝实现搜索下拉列表功能-创新互联
文章网址:http://hbruida.cn/article/csgiss.html

其他资讯