typeahead 表单，为用户提供提示或数据。自动补全bootstrap3-typeahead.js

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

<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;
}

js

<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" },
              { id: "someId7", name: "王大声道" },
              { id: "someId8", name: "大大声道" },
              { id: "someId9", name: "王大撒旦撒旦" },
              { id: "someId10", name: "哈是的" },
              { id: "someId11", name: "恩打发打发" },
              { id: "someId12", name: "啊大声道" },
            ],
            autoSelect: true
        });
    });
</script>