بحث Ajax Style Facebook

Question

لقد قمت بإنشاء أسلوب Ajax Asty على موقع Facebook عن موقعي حيث ستقوم بإنشاء النتائج في قائمة رائعة أسفل البحث.

$("#s").keyup(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
            type: "POST",
            url: "/livesearch.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#display").html(html).show();
            }
        });
    } else {return false; }  
});

$("body").click(function() {
        $("#display").hide();
});

المشكلة في هذا هي أنها غير فعالة بعض الشيء لأن المستخدم سوف يكتب كلمة على سبيل المثال "كرة القدم". سيؤدي هذا إلى تنفيذ 8 طلبات إلى الخادم. ماذا سيكون طريقة أكثر فاعلية للقيام بذلك؟ من الناحية المثالية ، أعتقد أنه يجب أن يخزن الطلب لمدة ثانية واحدة قبل إجراء البحث بدلاً من المفتاح الفوري. لكن ليس 100 ٪ متأكدين من كيفية القيام بذلك ...

Answer 1

تسمى الطريقة التي تشير إليها "Debouncing"

عادة ما يكون لدي وظيفة "debonce" في أسفل جميع البرامج النصية الخاصة بي

var debounce=function(func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100); 
    }; 
};

وبعد ذلك كلما فعلت أي شيء سيستفيد من تصحيح ، يمكنني استخدامه بشكل عام

لذلك سيتم إعادة كتابة الكود الخاص بك

$("#s").keyup(debounce(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
                type: "POST",
                url: "/livesearch.php",
                data: dataString,
                cache: false,
                success: function(html){
                        $("#display").html(html).show();
                }
        });
    } else {return false; }  
}
,350 /*determines the delay in ms*/
,false /*should it execute on first keyup event, 
       or delay the first event until 
       the value in ms specified above*/
));

Answer 2

هناك خيار آخر هو البدء في البحث بعد 2/3 أحرف. في انتظار ثانية واحدة قبل تقديم كل طلب لا يبدو جيدًا بالنسبة لي. حاول أيضًا إرسال بيانات أقل إلى الخادم مما قد يجعل الطلب والاستجابة بشكل أسرع.

Answer 3

يمكن أن يكون لديك كائن JSON جالسًا في مكان ما والبحث في ذلك بدلاً من البحث في قاعدة البيانات عدة مرات. لن يجلب الكثير من المتراكمة ، طالما أنها ليست قائمة تضم 1000 من الأصدقاء أو شيء من هذا القبيل.