Facebook style AJAX Recherche

Question

J'ai créé un style Facebook recherche ajax pour mon site où que vous tapez apportera les résultats dans une belle liste ci-dessous votre recherche.

$("#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();
});

Le problème est qu'il est un peu inefficace que l'utilisateur tapera un mot par exemple « football ». Cela procédera à 8 requêtes au serveur. Quel serait un moyen plus efficace de le faire? Idéalement, je pense qu'il devrait enregistrer la demande de 1 seconde avant de faire une recherche plutôt que keyup instantanée. mais pas à 100% sûr de savoir comment faire ...

Answer 1

la méthode que vous faites référence est appelé « anti-rebond »

J'ai généralement une fonction « anti-rebond » au bas de tous mes scripts

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); 
    }; 
};

Et chaque fois que je fais tout ce qui bénéficiera d'un debounce je peux l'utiliser génériquement

Alors votre code serait réécrite comme

$("#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

Une autre option serait de commencer la recherche après 2/3 caractères. En attente pendant 1 seconde avant de faire toute demande ne semble pas bon pour moi. Essayez également d'envoyer des données très moins de retour au serveur qui pourrait également faire la demande et une réponse plus rapide.

Answer 3

Vous pourriez avoir un objet JSON assis quelque part et la recherche qu'au lieu de rechercher plusieurs fois la base de données. Il ne sera pas apporter trop de faux, tant que ce n'est pas une liste de 1000 amis ou quelque chose.