如何写一个搜索框实时根据你输入的词条进行联想在下拉框

最近做了一个功能，大概需求是这样的，在一个搜索框输入词汇，搜索框会根据你输入的词汇实时监听，匹配符合条件的词汇放在下拉框，来让你选择，选择完后敲回车键跳到指定的搜索。这么做的目的是提高你检索的效率。前两天做了第一个版本，今天又改进了一下，在此把两个版本的都记在笔记上。

注意：因为本人结合了自己的实际的业务需求，可能不太满足你的需求，在此只是给你提供一个思路和做法，具体的还需要自己去改吧改吧。下面开始第一个版本

第一个版本并没有做下拉框，只是单纯做到匹配后就实时的输入到了搜索框，然后敲回车。第一个版本是表单提交。

需要引入三个文件：

div：

js：

第二个版本把表单提交做成了发送ajax的异步请求方式：

div：

js：

效果图是这样的：

总结：

表单的提交其实可以换成ajax去提交的，但是表单会带有自动刷新，在这里只能自己去手动刷新。

如果是为你手动渲染出来的dom去绑定点击事件，那么请用本案例里面的绑定方法。