typeahead使用配置参数。

Posted 2020-08-20 绵山

示例代码：

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>‘;
}
}
});

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