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>