自动补全bootstrap3-typeahead.js

<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  />
            <span class="glyphicon glyphicon-triangle-bottom form-control-feedback" aria-hidden="true"></span>
            <span >(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