> 编程开发 > AJAX相关 >

淘宝购物车页面：智能搜索框Ajax异步加载数据 2016-10-04 15:38　出处：未知　人气：　

如果有朋友对本篇文章的一些知识点不了解的话，可以先阅读此篇文章。在这篇文章中，我大概介绍了一下构建淘宝购物车页面需要的基础知识。

这篇文章主要探讨的是智能搜索框Ajax异步加载数据。jQuery的社区非常的活跃，许多朋友都在不同地方分享了很多优秀的插件。我在相关的网站上找过想实现类似功能的插件，但是没有找到。于是乎，自己动手丰衣足食。自己来搭建智能搜索框下拉列表。当然，如果有类似功能并且常维护Bug的插件，望留言交流。

首先需要先给大家打一根预防针。本人实现的智能搜索框下拉列表只供学习参考使用。因为智能搜索和模糊匹配的实现没有那么简单，它需要自己的一套系统。如果想实现相同的功能，可以看看这个 智能搜索框制作 的视频。 视频中远人老师介绍了如何去获取微软必应搜索引擎的数据库然后实现智能搜索和模糊匹配的功能。

简单的介绍一下智能搜索框实现的一些功能：

1.当输入特定字符（在JSON数据定义的是查询字符串('lan')）时，会有一个下拉列表弹出，并且每一个li元素都有相应的数据（调用了search.json）。这里使用的是$.get方法获取JSON数据，然后动态加载HTML，最后插入到客户端的某个空容器中。 2：在搜索框输入字符串'lan'，按下回车键，会有相应的商品被异步加载到页面中。这里也是使用了jQuery Ajax的$.get方法，调用了basketballShoes.json文件。 3：当我想查询某个商品，比如李宁的音速3篮球鞋。在搜索框输入'音速3'，按下回车，相应的商品被异步加载到页面中。 4：在搜索框中查询，并且被异步加载到页面中的商品，所有的事件都需要绑定到非动态加载HTML的元素上（此实战绑定在了body元素上），不能绑定在该元素上。否则，所有事件都会失效。这里涉及了事件代理和事件冒泡的原理。

以下的分享会分为如下部分

1.智能搜索下拉列表的实现 2.ajax异步获取商品 3.事件代理和事件冒泡 1.智能搜索下拉列表的实现

首先，需要做的是定义想要查询的JSON数据。

[ [ { "Query":"lan", "Results":[ { "Type":"AS", "Suggests":[ { "Txt":"Nike 耐克官方 ZOOM KOBE 男子篮球鞋 " }, { "Txt":"adidas Regulate 篮球鞋 " }, { "Txt":"李宁2016新款男子音速3高帮反弹篮球鞋" }, { "Txt":"李宁2016新款男子减震CBA魅影篮球鞋" }, { "Txt":"李宁男子专业篮球鞋CBA球迷空袭" }, { "Txt":"adidas罗斯系列场上款篮球鞋" }, { "Txt":"adidas Boost 罗斯系列篮球鞋 JXO25 " }, { "Txt":"adidas场上款篮球鞋 D Rose 7 Primeknit" } ] } ] } ] ] search.json

JSON是指Javascript对象字面量表示法，是一种用于数据交换的文本格式。每一个JSON对象，都是一个值。要么是简单类型的值，要么是复合类型的值。JSON对值的类型和格式有着严格的规定，比如说对象的名称（键名）必须放在双引号内，数组或对象的最后一个成员的后面，不能加逗号等等。所以构建JSON时一定要放到网上去检查一下是否书写正确。否则，JSON一旦出错，浏览器也不会报错。这个查错的成本就很高了。

以下是智能搜索的js代码。输入'lan' ，就有相应的下拉框弹出。

//搜索框下拉列表 $('body').on('keyup','.header-search-input',function(event){ = $(this).val(); //使用$.get()方法，并且将查询的值放在URI后面 $.get('search.json',{'Query':$val}, function(data) { for (var i = 0; i < data.length; i++) { //如果值与json中的query字段匹配，动态加载html if ($val === data[i][0].Query) { var $data = data[i][0].Results[0].Suggests; var $html= ''; $html+='<ul>'; //全局函数$.each，也可以使用for循环 $.each($data, function(index, val) { $html+='<li>'+val.Txt+'</li>'; }); $html+='</ul>'; //下列列表dispaly:none的，当符合条件后 //调用show()函数，然后设定css样式 $('.list').html($html).show().css({ 'position':'absolute', 'left':0, 'top':$('.header-search-input').height()+5 }) } } //当点击每一条li数据时，会相应的将数据作为搜索框的值 $('.list li').click(function(event) { var $liText = $(this).text(); $('.header-search-input').val($liText); }); }); //如果值为空，则隐藏整个列表 if ($(this).val() === '') { $('.list').hide(); } //按下回车时，调用shoppingCart()函数。 if (event.which === 13) { shoppingCart(); } }); 2.Ajax异步获取商品

在输入相应的查询字符串（'lan' 或者是 '音速3'），按下回车键之后，会有相应的商品被动态加载到html结构当中，这里调用了baskedballShoes.json。

[ [ { "Query":"lan", "Results":[ { "Type":"AS", "Suggests":[ { "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031", "num":339, "max":764, "label":"liningBas", "shop":"李宁官方网店", "image":"css/images/lining-bas.png", "color":"颜色分类：荧光果粉/木梅红", "size":"鞋码：42", "nonDiscount":"￥539.00", "bandCard":"css/images/bankCard.png", "sevenDay":"css/images/sevenDay.png", "guarantee":"css/images/guarantee.png" }, { "Txt":" adidas阿迪达斯篮球男子篮球鞋Regulate", "num":419, "max":18, "label":"adidas", "nonDiscount":"￥539.00", "image":"css/images/adidas.png", "color":"颜色分类：银金属/深藏青蓝", "shop":"adidas官方旗舰店", "size":"鞋码：43.5", "bandCard":"css/images/bankCard.png", "sevenDay":"css/images/sevenDay.png", "guarantee":"css/images/guarantee.png" } ] } ] } ], [ { "Query":"音速3", "Results":[ { "Type":"AS", "Suggests":[ { "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031", "num":339, "max":764, "shop":"李宁官方网店", "image":"css/images/lining-bas.png", "color":"颜色分类：荧光果粉/木梅红", "size":"鞋码：42", "nonDiscount":"￥539.00", "bandCard":"css/images/bankCard.png", "sevenDay":"css/images/sevenDay.png", "guarantee":"css/images/guarantee.png" } ] } ] } ] ] basketballShoes.json