带搜索功能的下拉框

从上面我们可以对比看出，输入框在没输入数据之前下拉框选择项是所有的选择项，在输入框输入数据之后就会对下拉框选择项进行筛选

从上图我们看得出荧光笔涂鸦部分是一个datalist标签。
介绍一下datalist标签： dataList 控件是用于显示限制于该控件的项目的重复列表，它是属于ASP.NET的控件。就是说在input标签中输入值，会显示出option 标签的value相似的值。Input标签和datalist控件能够联系的主要原因是在input标签上调用了datalist（上图红色圈中部分），如果不调用就不会有选择项。

上面是手写的联想下拉框，但是它还不够完善，选项是局限性的只能在它原有的那么几项数据中选择数据，所以需要换一下思维将联想下拉框做好一些，我们可以使用layui插件来进行补充。Layui插件中自带了一个带搜索功能的选择框，通过layui插件设定属性 lay-search 来开启搜索匹配功能。

Layui插件中的源码（申明：上图的源代码是来源于layui文档的源代码，并非本人原创）

可以对比效果看个人喜好，选择自己更喜欢的效果。上图左侧是直接使用layui插件中的 lay-search 属性的效果示意，右侧是使用了其他jQuery基于layui插件的插件。
插件下载路径：https://www.lanrenzhijia.com/jquery/8673.html 或者直接输入 jQuery基于Layui下拉框搜索提示列表代码