使用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:对数据格式做转化，如果有需要的话,比如把服务器的某个字段名改掉，或者某个字段进行数学计算