Optimisation recherche instantané Ajax

driven78
Javascript

Comme mentionné dans le titre, je recherche à optimiser mon moteur de recherche;
Voici mon code de base:

    $("#recherche").on("keyup", function(e) {        
        var code = e.keyCode || e.which; 
        if (code  === 13) {   
            e.preventDefault();
            return false;
        };
        $('#result_search').remove();
        var recherche = $(this).val();
        var data = 'keywords=' + recherche;
        if(recherche.length>2){
                $.ajax({
                    type : "POST",
                    url : "recherche/searchAjax",
                    data : data,
                    success: function(server_response){
                       $("#resultat").html(server_response).show();
                    }
                });
            }
        }
    });

ce que je souhaiterai faire, c'est l'optimiser c'est à dire, que si un utilisateur tappe une phrase de 10 lettres assez vite qu'il n'y ait pas pas 8 requettes envoyés au serveur (10 - les 2 de la conditions du depart).
J'ai donc penser à installer un système de timer qui prend en compte le temps de la derniere requete. Mais ce code me donne pas entière satisfaction:
Voici le code:

  var timeLastRequest = 0;
    $("#recherche").on("keyup", function(e) {        
        var code = e.keyCode || e.which; 
        if (code  === 13) {   
            e.preventDefault();
            return false;
        };
        $('#result_search').remove();
        var recherche = $(this).val();
        var data = 'keywords=' + recherche;
        if(recherche.length>2){
            var time = (new Date()).getTime();
            if(time > timeLastRequest + 1000){
                $.ajax({
                    type : "POST",
                    url : "recherche/searchAjax",
                    data : data,
                    success: function(server_response){
                       $("#resultat").html(server_response).show();
                    },
                    complete: function(server_response){
                       timeLastRequest = (new Date()).getTime();
                    }
                });
            }
        }        
    });

ca deconne et c'est pas top, Avez vous des idées?
Merci d'avance pour vos réponses

5 réponses

driven78
Auteur

apres quelques recherches, j'en suis arriver à ca:
ca à l'air d'etre pas trop mal:

var timeR = null;
    $("#recherche").on("keyup", function(e) { 
        var code = e.keyCode || e.which; 
        if (code  === 13) {   
            e.preventDefault();
            return false;
        };
        if(timeR){
            window.clearTimeout(timeR);
        }
        var string = $(this).val();
        if(string.length>2){
            timeR=window.setTimeout("recherche('"+string+"')",500);
        }
    });

    function recherche(string){    
        $('#result_search').remove();
        $.ajax({
            type : "POST",
            url : "recherche/searchAjax",
            data : 'keywords=' + string,
            success: function(server_response){
               $("#resultat").html(server_response).show();
            }
        });       
    };

qu'en pensez-vous?

Grafikart

J'introduirais un petit délai qui empècherais la fonction de s'éxécuter. Tu peux utiliser underscore js pour ne pas trop te prendre la tête : http://underscorejs.org/#throttle

betaWeb

Salut,

J'ai implémenté une petite fonction qui permet de faire ce que tu décris pour le site de ma copine http://jennycuisinepourvous.fr/. Cliques sur la loupe en haut à gauche et tape "chocolat" dans la barre de recherche, tu constatera un délai entre la saisie et la recherche (ne fais pas attention au style il faut que je le reprenne ^^').
Ma problématique était similaire, à savoir que je voulais éviter 10 appels AJAX si le mot fait 10 lettres.

Voici le bout de code qui gère ce délai (1000ms entre le keyup() et l'appel AJAX):

$('#ton_input').on('keyup', function(e) {
    var timeout = 1000;
    var key = e.keyCode || e.which;

    clearTimeout($.data(this, 'timer'));

     var wait = setTimeout(function(){
        // ta fonction AJAX ici
     }, timeout, key);
    $(this).data('timer', wait);
});

J'espère que ça pourra t'aider ;)

driven78
Auteur

J'ai été voir ton site betaWeb, et en effet le répondu de ton moteur me parait meilleur. je testerai ton code.

Petit Hs, sympa ton site, clair et élégant, Je savais pas quoi me faire a manger ce midi, voila c'est fait lol
Connexion facebook et principe de tag pour enregistrer ou partager les recettes favorites serait le bienvenu

betaWeb

@driven78 Merci beaucoup :)
Tu peux partager une recette via l'icone "Facebook" en haut à droite de chaque recette ;)