<form class="form-horizontal" role="form"> <div class="form-group col-sm-6"> <label for="" class="col-sm-2 control-label">名字</label> <div class="col-sm-10 has-feedback"> <input id="" type="text" class="form-control typeahead" placeholder="请输入姓" /> <span class="glyphicon glyphicon-triangle-bottom form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span></div> </div> </form>
<!--自定义样式--> .typeahead{ max-height: 250px; overflow: auto; }
<script>
$(document).ready(function () { var $input = $(".typeahead"); $input.typeahead({ minLength: 0,//键入字数多少开始补全 showHintOnFocus: "true",//将显示所有匹配项 fitToElement: true,//选项框宽度与输入框一致 items: "all",//提示数量上限 source: [ { id: "someId1", name: "Display name 1" }, { id: "someId2", name: "Display name 2" }, { id: "someId3", name: "Display name 3" }, { id: "someId4", name: "Display name 4" }, { id: "someId5", name: "Display name 5" }, { id: "someId6", name: "Display name 6" }, ], autoSelect: true,
afterSelect:function(item){
//点击方法
},
displayText:function(item){
//返回字符串
} }); }); </script>
typeahead.js bootstrap3-typeahead.js 还有jQuery ui 插件autocomplete
先说bootstrap3-typeahead.js符合bootstrap样式格式但是功能没有衍生typeahead.js强大:
官网:https://github.com/bassjobsen/Bootstrap-3-Typeahead/
菜鸟网站上:http://www.runoob.com/bootstrap/bootstrap-v2-typeahead-plugin.html