使用Bootstrap typeahead插件實現搜索框自動補全的配置參數。

示例代碼：

<input type="text" id="addr"/>
<input type="text" hidden id="lat"/>
<input type="text" hidden id="lon"/>
API:http://wiki.openstreetmap.org/wiki/Nominatim
需求：經過輸入地名自動補全地址信息，選擇提示信息後，講地址經緯度附值給隱藏的input，後提交表單。

var suggestion_source  = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("display_name"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: "http://nominatim.openstreetmap.org/search?format=json&q=%QUERY",
            wildcard: '%QUERY',
            transform:function(response){
                return response;
            }
        }
    });

    $('#addr').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                source: suggestion_source,
                display:function(item){
                    return item.display_name;
                },
                templates: {
                    suggestion: function (data) {
                        return '<p style="text-align: left">' + data.display_name + '</p>';
                    }
                }
            });


    $('#addr').bind('typeahead:select', function(ev, suggestion) {
            $('#lat').val((suggestion.lat));
            $('#lon').val((suggestion.lon));
    });
    $('#referred').click(function () {
        var lat =  $('#lat').val();
        var lon = $('#lon').val();
        var name = $('#name').val();
        var address = $('#addr').val();
        if(name==''||address==''){
            $.toast({
                text:'請補全信息！',
                icon:'error'
            })
        }
        else {
            $.ajax({
                url:url+'abc',
                type:'post',
                dataType:'json',
                contentType:'application/json',
                data:JSON.stringify({
                    name:name,
                    address:address,
                    latitude:lat,
                    longitude:lon
                }),
                success:function () {
                    $.toast({
                        text:'新建地址成功！',
                        icon:'success'
                    })
                },
                error:function () {
                    $.toast({
                        text:'新建地址失敗！',
                        icon:'error'
                    })
                }
            })
        }

    });

默認的display就好，不須要去覆蓋

source是配置typehead的數據源

Bloodhound.tokenizers.obj.whitespace("city")，這個稍稍複雜一點,.whitespace("xxx")這個是指取"xxx"這個屬性，進行空白分詞，以便查詢.

好比返回的json，有一個屬性叫city，若是有一個具體的city="New York"，那麼進行了Bloodhound.tokenizers.obj.whitespace("city")以後，不管用戶輸入New或者York，都能查到，而不用考慮空格.

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("display_name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,有兩個這個參數.

datumTokenizer是針對返回結果集的，
queryToken是針對查詢參數的.

template是定義每一行option的顯示效果的.

transform:對數據格式作轉化，若是有須要的話,好比把服務器的某個字段名改掉，或者某個字段進行數學計算