typeahead使用ajax补全输入框的方法

最近想使用一个输入框补全的功能，bootstrap有，但是官方手册太简单，搞了好几天，终于弄好了。

官方使用的方法是/<input type="text" data-provide="typeahead" />,我开始用静态source数据都弄不出来，后来搜了一下，有国外用户说加一个class="typeahead"，因为bootstrap要求数据都来自一个地方，要么都放在html标签里面，例如/<input type="text" data-provide="typeahead" source="[...]" />，要么就都放在js方法里面。还有typeahead不接收json数据，要转换成数组，typeahead的source方法可以设置为函数，传递两个参数，一个query是input输入框内的数据，一个process回调函数。

 

最后就是下面这样

html:

/<input id="ProtocolCompany'" type="text" class="typeahead" />

 

js:

$('#ProtocolCompany').typeahead({
        source: function (query, process) {
            $.ajax({
                url: 'InputPriceAction.ashx?Action=GetPlace',
                type: 'GET',
                dataType: 'JSON',
                async: true,
                data: 'PlaceName=' + query,
                success: function (data) {
                    var arr = [];
                    for (i in data) {
                        arr.push(data[i]['H_ChineseName'] + data[i]['H_EnglishName']);
                    }
                    process(arr);
                }
            });
        }
    })