淘宝购物车页面 智能搜索框Ajax异步加载数据

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

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

源码地址： 淘宝购物车页面--PC端和移动端项目实战

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

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

　　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"            }          ]        }      ]    }  ]]

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：淘宝购物车页面 智能搜索框Ajax异步加载数据

关键词：ajax