实现可输入可选择可模糊匹配的下拉框

效果图:

实现可输入可选择可模糊匹配的下拉框_第1张图片

实现可输入可选择可模糊匹配的下拉框_第2张图片

方法一:

1、利用HTML5中新的特性  input的list绑定

实现可输入可选择可模糊匹配的下拉框_第3张图片 

 方法二:

1、需要使用jQuery autocomplete插件实现模糊匹配

2、实现既能选择又能输入的下拉框思路:下拉框和输入框用position:absolute确定彼此的位置,下拉框的宽度要比输入框的长度要长确保露出下拉图标。然后用js控制下拉框选择的内容联动到输入框内

HTML代码

实现可输入可选择可模糊匹配的下拉框_第4张图片

css代码

实现可输入可选择可模糊匹配的下拉框_第5张图片

js代码

实现可输入可选择可模糊匹配的下拉框_第6张图片

 

你可能感兴趣的:(学习js之路)