仿百度、阿里等搜索自动补全

有些项目中需要用到搜索框输入自动补全功能，于是今天学习了一遍，主要原理是利用搜索框keyup键盘弹起事件，当键盘弹起时一个字符输入结束，获取输入框的字符，然后利用Ajax从将数据传回数据库，将Ajax返回数据放在下拉框中供用户选择；

效果图：

 

1.html界面

input(1)保存用户选择（可以多选）结果，隐藏，主要保存用户所选数据id（用户看到的是文本，我们操作的是文本id）

input (2)用户输入的搜索信息自动补全

div(3)用于下拉供用户选择结果(文本)

div(4)显示用户所选数据（文本多选）

2、Ajax获取数据

获取到数据后将数据动态放在context1中，context1设置为可见

3、动态添加元素的鼠标进入和鼠标离开事件

4、用户选择数据的点击事件

到此就结束了；需要注意的是Ajax后台查询的是方法是模糊查询