twitter typeahead是个非常好用的文本自动补全填充JS,功能用户在input输入关键字过,会出现列表用户点选补全(类似百度搜索框),引入我的网址,功能已经实现,还有个问题未解决,不知道怎么下手,请各位大哥帮忙看看。
我想实现当input失去焦点,就判断input内容是否在列表中,如果不在,则清空input(目的是input最后提交的内容必须是在列表选择的,不允许用户随便填)。
或者如何获得remote返回结果数组?我再写判断代码。
twitter typeahead官网:http://twitter.github.io/typeahead.js/examples/
我的代码:
//==搜索文本框变量=================
var vSouSuoInp = "",
arrTypeahead;
arrTypeahead = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "null",
wildcard: '%QUERY',
rateLimitBy: 'throttle',
rateLimitWait: 2000
}
});
//==搜索文本框变量赋值=================
$("#divMainContent").on("focus", ".typeahead", function () {
let arrDataSousuo = $(this).data("sousuo").split(",");
vSouSuoInp = arrDataSousuo[0];
arrTypeahead.remote.url = arrDataSousuo[1] + '?key=%QUERY&vBiao=' + arrDataSousuo[2] + '&vZiDuan=' + arrDataSousuo[3] + '&vDISTINCT=' + arrDataSousuo[4];
if ($(this).data("inset") == "0") {
$('.typeahead').typeahead({
minLength: 2,
highlight: true
}, {
name: 'arr-Typeahead',
limit: 10,
display: 'value',
source: arrTypeahead,
templates: {
notFound: '<span style="margin: 0 10px"><i class="icon-exclamation-sign"> </i>无匹配结果</span>'
}
});
$(this).data("inset", "1");
$(this)[0].focus();
}else{
console.log(arrTypeahead);
};
});