I'm using jQuery autocomplete, but I found a performance-related issue - if I input 'abc', it will be scanning by 'a', by 'ab', and by 'abc', at a once, how can I stop the previous 'a', 'ab' when ajax calling is doing searching by 'abc'?
I use async true-false but it still give performance problem.Because response for 'ab' there is 100 item in response but for 'abc' there is only 1 item in response.So untill 100 item loaded for ab,one item load for 'abc' so it load wrong response.It load last response.It load 100 response for 'abc' but it should load 1 item..
Hope I made myself clear. Thanks in advance.
here is my ajax call
$.fn.autoComplate = function (ayar) {
var varsayilan = {
url: 'url',
culture: 'tr',
icon: 'hotelsearchicon.png'
};
var ayar = $.extend(varsayilan, ayar);
var els = $(this);
var text = '';
var isfocus = false;
var isClick = false;
var isEnter = false;
var Ajaxrequest;
console.log('ajax req oluştu:' + Ajaxrequest);
//var SearchTimer;
var scroll;
return this.each(function () {
els.find('input[type=text]').bind('focus', function (event) {
isEnter = false;
var textb = $(this);
text = textb.val();
if (!(text.length > 2)) {
if (varsayilan.culture == "tr")
els.find('ul').html('<li>Aramaya Başlamak için 3 Karakter Girin</li>').slideDown();
else
els.find('ul').html('<li>Please Enter 3 More Characters.</li>').slideDown();
} else {
els.find('ul').slideDown('');
if (text != '') {
textb.val(text);
}
}
});
els.find('input[type=text]').on('keyup', function (event) {
text = $.trim($(this).val());
isEnter = false;
if (event.which != 38 && event.which != 40 && event.keyCode != 13) {
if (text.length >= 3) {
isEnter = false;
//clearTimeout(SearchTimer);
els.find('ul').html('');
els.find('ul').slideDown();
//els.find('ul').append('<li id="loading"><img src="https://www.sondakka.com/Content/images/loadingOrange.gif" /> ' + (varsayilan.culture == "tr" ? 'Sonuçlar getiriliyor.' : 'Loading.') + '</li>');
//SearchTimer = setTimeout(function () {
//alert('clear a düştü 1');
if (text.length >= 3) {
if (Ajaxrequest) {
Ajaxrequest.abort();
}
Ajaxrequest = $.ajax({
//async: text.length >= 3 ? false : true,true olacak değiştirme..
async:true,
type: 'POST',
url: ayar.url,
data: { "q": text, "culture": ayar.culture },
success: function (data) {
els.find('ul').html('');
//alert('clear a düştü 2');
$.each(data, function (i, item) {
if ((item.Item1.indexOf("All Airports") > -1) || (item.Item1.indexOf("Tüm hava limanları") > -1)) {
els.find('ul').append('<li iscity="true" ctype="' + item.Item3 + '" data="' + item.Item2 + '">' + item.Item1 + '</li>');
}
else {
els.find('ul').append('<li iscity="false" ctype="' + item.Item3 + '" data="' + item.Item2 + '">' + item.Item1 + '</li>');
}
});