大佬教程收集整理的这篇文章主要介绍了jquery – 如何使用带有ajax的实现自动完成插件？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的ajax请求在keydown事件中调用.所有获取的数据都会自动推送到键/值对象数组中.
然后,我将自动完成功能放在ajax的成功函数中,键“data”的值是之前构建的对象数组.
这似乎是我的好方法,但当我在浏览器中测试时,每次我输入内容时,建议下拉列表会显示预期的结果,但不是在每次keydown后续订,另一个下拉列表与前一个下拉列表重叠一个……
所以这是我的问题：如何避免下拉建议列表重叠,而是每次按一次键时更新它？
谢谢你的帮忙.
var dat = {};
$('input').on('keydown',function(e){
var d = {
"query": {
"prefix": {
"body": e.target.value
}
}
};
$.ajax({
url:'https://xxxxxxxxxxxxxxx.eu-west-1.es.amazonaws.com/xxxxxxxxxxxxx',type:'POST',contentType : "application/json",crossDomain : true,data:JSON.stringify(d),dataType:'JSON',async:true,success: function(da){
var c = da.hits.hits.length;
for(var i = 0; i < c; i++){
dat[da.hits.hits[i]._source.body] = null;
}
$("input").autocomplete({
data : dat
},error: function(jqXHR,errorStatus,errorThrown){
console.log(jqXHR);
console.log(errorStatus);
console.log(errorThrown);
}
})
>它基于Materialized.js原始函数
>在键入时取消现有的ajax请求,这样就不会得到双重结果
>如果删除’timeout’注释行,则只会在按键后经过’x’时间后调用ajax调用.当您快速打字时,可能会有用,以避免每按一次按键调用ajax(即使它们被取消).
见下文：
initAutoComplete({inputId:'autocomplete-input',ajaxUrl:'/search/my-auto-complete-results'})
function initAutoComplete(options)
{
var defaults = {
inputId:null,ajaxUrl:false,data: {}
};
options = $.extend(defaults,options);
var $input = $("#"+options.inputId);
if (options.ajaxUrl !== false)
{
var $autocomplete = $('<ul id="myId" class="autocomplete-content dropdown-content"></ul>'),$inputDiv = $input.closest('.input-field'),//timeout,runningRequest = false,request;
if ($inputDiv.length) {
$inputDiv.append($autocomplete); // Set ul in body
} else {
$input.after($autocomplete);
}
var highlight = function(string,$el) {
var img = $el.find('img');
var matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""),matchEnd = matchStart + string.length - 1,beforeMatch = $el.text().slice(0,matchStart),matchText = $el.text().slice(matchStart,matchEnd + 1),afterMatch = $el.text().slice(matchEnd + 1);
$el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
if (img.length) {
$el.prepend(img);
}
};
$autocomplete.on('click','li',function () {
$input.val($(this).text().trim());
$autocomplete.empty();
});
$input.on('keyup',function (e) {
//if(timeout){ clearTimeout(timeout);}
if(runningRequest) request.abort();
if (e.which === 13) {
$autocomplete.find('li').first().click();
return;
}
var val = $input.val().toLowerCase();
$autocomplete.empty();
//timeout = setTimeout(function() {
runningRequest=true;
request = $.ajax({
type: 'GET',// your request type
url: options.ajaxUrl,success: function (data) {
if (!$.isEmptyObject(data)) {
// Check if the input isn't empty
if (val !== '') {
for(var key in data) {
if (data.hasOwnProperty(key) &&
key.toLowerCase().indexOf(val) !== -1 &&
key.toLowerCase() !== val) {
var autocompleteOption = $('<li></li>');
if(!!data[key]) {
autocompleteOption.append('<img src="'+ data[key] +'" class="right circle"><span>'+ key +'</span>');
} else {
autocompleteOption.append('<span>'+ key +'</span>');
}
$autocomplete.append(autocompleteOption);
highlight(val,autocompleteOption);
}
}
}
}
},complete:function(){
runningRequest = false;
}
});
//},250);
});
}
else
{
$input.autocomplete({
data: options.data
});
}
}
以上是大佬教程为你收集整理的jquery – 如何使用带有ajax的实现自动完成插件？全部内容，希望文章能够帮你解决jquery – 如何使用带有ajax的实现自动完成插件？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。