带下拉框的input文本(两种实现方式)

第一种

为了样式好看一些我是搭配的bootstarp使用的,如果不使用bootstarp就去掉 class="form-control" 和 class="form-group col-lg-3"属性

效果:

带下拉框的input文本(两种实现方式)_第1张图片


第二种 

第二种比第一种的好处是输入文字后模糊匹配下拉框内容,坏处谷歌兼容不好

1. 当作下拉框使用

带下拉框的input文本(两种实现方式)_第2张图片

 1.1 模糊查询下拉框

带下拉框的input文本(两种实现方式)_第3张图片

 2. 当作text文本框使用



	
	
	
	
	


// 选取的option会绑定到input上,所以提交数据到后台的时候正常提交input就行。

说明:回显初始化option标签可使用ajax或el表达式,把后台数据遍历到option上即可使用。

你可能感兴趣的:(前端)