要实现是效果
input输入框 点击输入框时出现下列列表可以选值,也可以直接输入值,自动筛选匹配到列表后在输入框下发展示,如果用户输入值不在列表范围内置为空。
所需依赖
jquery+bootstrap.js+Bootstrap-3-Typeahead https://github.com/bassjobsen/Bootstrap-3-Typeahead
示例
html
<input type="text" id="modelCode" class="typeahead form-control" data-provide="typeahead">
js
var $input = $("#modelCode");
$input.typeahead({ source:source, items:'all', minLength:0, showHintOnFocus:'all', scrollHeight:0, autoSelect:false, fitToElement:true});
$input.change(function() { var current = $input.val(); if (current) { if (!source.some(function (item) { return item === current })) { self.modelCode(''); } }}).click(function () { $input.typeahead('lookup')});