twitter typeahead文本自动补全JS库的问题
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;
arrTypeahead.remote.url = arrDataSousuo + '?key=%QUERY&vBiao=' + arrDataSousuo + '&vZiDuan=' + arrDataSousuo + '&vDISTINCT=' + arrDataSousuo;
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).focus();
}else{
console.log(arrTypeahead);
};
}); 问题已解决，谢谢。
见文本框失去焦点事件。
//==搜索文本框变量=================
var vSouSuoInp = "",
vTypeahead,
arrResponse = [];
vTypeahead = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "null",
wildcard: '%QUERY',
rateLimitBy: 'throttle',
rateLimitWait: 2000,
transform: function (response) {
arrResponse = response;
return response;
}
}
});
//==搜索文本框变量赋值=================
$("#divMainContent").on("focus", ".typeahead", function () {
let arrDataSousuo = $(this).data("sousuo").split(",");
vSouSuoInp = arrDataSousuo;
vTypeahead.remote.url = arrDataSousuo + '?key=%QUERY&vBiao=' + arrDataSousuo + '&vZiDuan=' + arrDataSousuo + '&vDISTINCT=' + arrDataSousuo;
if ($(this).data("inset") == "0") {
$('.typeahead').typeahead({
minLength: 2,
highlight: true
}, {
name: 'arr-Typeahead',
limit: 10,
display: 'value',
source: vTypeahead,
templates: {
notFound: '<span style="margin: 0 10px"><i class="icon-exclamation-sign"> </i>无匹配结果</span>'
}
});
$(this).data("inset", "1");
$(this).focus();
};
});
//==搜索文本框失去焦点=================
$("#divMainContent").on("blur", ".typeahead", function () {
if ($(this).val() != "") {
for (i = 0; i < arrResponse.length; i++) {
if ($(this).val() == arrResponse["value"]) {
return
};
};
$(this).typeahead('val', "");
}
});
页:
[1]