نتائج البحث التنبؤية:وظيفة تشغيل Jquery بعد اكتمال getJSON داخل وظيفة keyup
سؤال
لقد قرأت الكثير من الإجابات هنا حول التقنيات المؤجلة لطلبات getJSON/ajax ولكن لا يبدو أن هناك شيئًا يناسب السيناريو الخاص بي.أقوم بإدخال بحث لإرجاع مجموعة من النتائج بناءً على استدعاء getJSON بعد 4 أحرف.وذلك للحد من كمية النتائج التي يتم إرجاعها، وكذلك كمية طلبات أجاكس (مفتوحة لحلول أكثر فعالية).
search_input.on('keyup', function() {
var string = $(this).val();
var quiet_chars = 4;
if(string.length < quiet_chars) {
// Simple notifications function which passes a message to a div, and optional class
notification('Type '+(quiet_chars - string.length)+' more characters to search');
}
if(string.length == quiet_chars) {
notification('Searching...', 'loading');
$.getJSON('stores/stores-search/'+string, function(data) {
// Loop through data and build list....
$('.search_results').html('<ul>'+list_html+'</ul>');
// Function which shows/hides list items based on Jquery :contains
searchResults(string);
});
}
if(string.length > quiet_chars) {
searchResults(string);
}
});
المشكلة المحددة التي أواجهها هي أنه إذا قمت بكتابة 5 أحرف (أكثر من 4) بسرعة، فسيتم عرض if(string.length > quiet_chars)
تم استيفاء الشرط من قبل $('.search_results').html('<ul>'+list_html+'</ul>');
تم تنفيذه، ويخبر المستخدم بعدم وجود نتائج بحث.
أنا بحاجة للقاء if(string.length > quiet_chars)
شرط لمواصلة تصفية النتائج التي تم إرجاعها، ولكن فقط بعد إلحاق القائمة بـ DOM من طلب getJSON.شكرًا.
المحلول 2
حصلت عليه العمل!
var json_success = false,
ajax_term;
function searchJson(string) {
ajax_term = string;
notification('Searching...', 'loading');
$.getJSON('stores/stores-search/'+string, function(data) {
// Loop through data and build list....
$('.search_results').html('<ul>'+list_html+'</ul>');
searchResults(string);
json_success = true;
});
}
search_input.on('keyup', function() {
var string = $(this).val();
var quiet_chars = 4;
if(string.length < quiet_chars) {
json_success = false;
notification('Type '+(quiet_chars - string.length)+' more characters to search');
} else {
if(json_success !== false || string.substr(0,4) !== ajax_term) {
$.when(searchJson(string)).then(searchResults(string))
} else {
searchResults(string)
}
}
});
من هنا: https://stackoverflow.com/questions/5280699#5291067
إذا كان أي شخص يحاول الحصول على شيء مماثل يعمل، فإليك وظيفة نتائج البحث الخاصة بي:
//extends :contains to be case insensitive
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
// Instant search results
function searchResults(searchTerm) {
var searchSplit = searchTerm.replace(/ /g, "'):containsi('");
$(".search_results .tile").not(":containsi('" + searchSplit + "')").each(function() {
$(this).addClass('hide').removeClass('show');
});
$(".search_results .tile:containsi('" + searchSplit + "')").each(function() {
$(this).removeClass('hide').addClass('show');
});
var resultCount = $('.search_results .show').length;
if(resultCount != '0') {
notification('Showing '+resultCount+' results');
} else {
notification('No results', 'error');
}
}
الائتمان للإصدار غير حساس لحالة الأحرف من :contains
يذهب إلى روب سوير.
نصائح أخرى
تم تعديله ليناسب مواصفاتك
bool dataLoaded = false; //this is a global variable we have outside of the scope of the search_input.on function
search_input.on('keyup', function() {
var string = $(this).val();
var quiet_chars = 4;
if(string.length < quiet_chars) {
//let's reset the dataLoaded flag if the user ends up deleting characters and what not
if(dataLoaded)
dataLoaded = !dataLoaded;
// Simple notifications function which passes a message to a div, and optional class
notification('Type '+(quiet_chars - string.length)+' more characters to search');
}
if(string.length == quiet_chars) {
notification('Searching...', 'loading');
$.getJSON('stores/stores-search/'+string, function(data) {
// Loop through data and build list....
$('.search_results').html('<ul>'+list_html+'</ul>');
dataLoaded = true;
// Function which shows/hides list items based on Jquery :contains
searchResults(string);
});
}
else if(dataLoaded){
searchResults(string);
}
});