标签：function 插件 Bloodhound 补全 Bootstrap whitespace tokenizers suggestion name

示例代码：

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

标签：function,插件,Bloodhound,补全,Bootstrap,whitespace,tokenizers,suggestion,name
来源： https://www.cnblogs.com/10manongit/p/12919045.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。