Bootstrap typeahed是一个字符后使用jquery
Bootstrap typeahed is one character behind using jquery
我使用bootstrap typeahead
(GitHub)创建搜索表单。在用户输入一些东西后,我使用elasticsearch.js
做elasticsearch query
并返回结果。问题是提前输入显示的结果总是落后一个字符,而不是提示正确的值。
Typeahead输入:
<input type="text" data-provide="typeahead" class="form-control typeahead" id="searchInputId" placeholder="Search" autocomplete="off">
下面是我的代码:
var elasticsearchAddress = "exampleserver.com:9200";
var elasticsearchClient = createElasticsearchClient(elasticsearchAddress);
var data = [];
$("#searchInputId").typeahead({ source:data, items:10, fitToElement:true });
$("#searchInputId").on("input", function(){
var searchTerm = $("#searchInputId").val();
elasticsearchMathPhrasePrefixSearch(elasticsearchClient, searchTerm, function () {
$("#searchInputId").data('typeahead').source = getElasticsearchSearchResultsArray();
});
});
elasticsearchMathPhrasePrefixSearch() function
function elasticsearchMathPhrasePrefixSearch(client, searchPhrase, callback) {
console.log("Searching for: " + searchPhrase);
client.search({
body: {
"query": {
"match_phrase_prefix": {
"accountName": searchPhrase
}
}
}
}, function (error, response) {
if (error) {
console.trace('ELASTICSEARCH: Search query failed');
} else {
console.log('ELASTICSEARCH: Search query OK');
var doc = response.hits.hits;
elasticsearchSearchResultsArray = getDocs(doc);
}
callback();
});
}
getDocs() function
function getDocs(doc){
var searchResultsArray=[];
for(var i = 0; i < doc.length; i++){
searchResultsArray.push(doc[i]._source.accountName);
}
return searchResultsArray;
getElasticsearchSearchResultsArray() function
function getElasticsearchSearchResultsArray(){
return elasticsearchSearchResultsArray;
}
elasticsearchSearchResultsArray
是保存结果的全局数组。由于JS的异步性质,我没有其他的想法使它工作。
好的,我修改了我的代码,使源代码在这个问题#1997的帮助下正确更新。但现在我又遇到了另一个问题。
输入 时不显示typeahead下拉菜单。新代码:
var empty = [];
$("#searchInputId").typeahead({ source:empty, items:10, fitToElement:true });
$("#searchInputId").on("keyup", function(ev){
ev.stopPropagation();
ev.preventDefault();
//filter out up/down, tab, enter, and escape keys
if( $.inArray(ev.keyCode,[40,38,9,13,27]) === -1 ){
var self = $(this);
//set typeahead source to empty
self.data('typeahead').source = [];
//active used so we aren't triggering duplicate keyup events
if( !self.data('active') && self.val().length > 0){
self.data('active', true);
//Do data request. Insert your own API logic here.
var searchTerm = self.val();
elasticsearchMathPhrasePrefixSearch(elasticsearchClient, searchTerm, function() {
//set this to true when your callback executes
self.data('active',true);
//set your results into the typehead's source
self.data('typeahead').source = getElasticsearchSearchResultsArray();
//trigger keyup on the typeahead to make it search
self.trigger('keyup');
//All done, set to false to prepare for the next remote query.
self.data('active', false);
});
}
}
});
尝试使用on("keyup")
代替。
好吧,我自己解决了。我从bootstrap3-typeahead切换到jQuery UI自动完成。它工作得很好,脚本要小得多。
新代码:$("#searchInputId").on("keydown", function () {
$("#searchInputId").autocomplete({
source: function(request, response) {
var searchTerm = $("#searchInputId").val();
elasticsearchMathPhrasePrefixSearch(elasticsearchClient, searchTerm, function (){
response(getElasticsearchSearchResultsArray());
});
}
});
});
相关文章:
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- 如何用jquery替换字符串中可能变化的字符
- 一个jquery验证器方法,它不接受纯数字或纯特殊字符,但接受上面是否有字母
- JQuery根据连字符前的首字母对列表进行排序
- jQuery-Regex以防止任何特殊字符
- 如何使用JQuery检查输入(电子邮件)字段是否包含特殊字符
- 带有连字符的 Jquery 表排序器编号
- Rails:使用Jquery进行Text_Area字符计数
- 使用jQuery.css()方法时,是否需要转义任何字符
- 使用jquery删除href中的特定字符或标记
- 仅替换 iframe 的编码字符 Jquery
- 如何仅验证文本、英文字符和非英文字符 jquery validater
- 如何删除span中的连字符?(jQuery)
- 不允许使用特殊字符jQuery
- 限制键入无效字符-jquery validate
- 删除下一个字符jQuery(没有给出html元素)
- 将字符串从字符jquery的第n个词根拆分为两个子字符串
- 如何验证字符串仅为非字母字符jquery验证
- 限制用户编辑字符后的特殊字符- Jquery
- 在数据值字符串中动态添加连字符jQuery