Synchronisation de résultat

Version imprimable

Bonjour, j'ai un moteur de recherche j'ai bien les réponses, mais j'ai un problème de "retard" de résultat.

lorsque je tape 3 lettres il commence à rechercher et une fois trouvé il affiche, mais si je tape une autre lettre,
et que la précédente n'est pas terminé, je vais voir affiché le premier résultat puis le deuxième ainsi de suite , c'est déroutant ....

quelle serait la solution pour contourner ce bug ?

voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function() {
    $("#find_filtre").on("change", function() {//changement du filtre
        if ($('#find_cours').val().length > 2){
            recherche();
        }
    });
    $("#find_cours").on("keyup", function() {//saisie de 3 lettre dans le champ recherche
        if ($('#find_cours').val().length > 2){
            recherche();
        }
    });
    //permet de fermer la fenêtre de recherche modal
    $("#modal_off").on("click", function() {
        $("#modal_recherche").css('display', 'none');
    })
    function recherche() {
        var motcle = $("#find_cours").val(); //recupération du mot cle
        var filtre = $('#find_filtre').val(); //filtre all par default
        $("#wait").css('display', 'block'); //faire apparaître le loading
        $("#modal_recherche").css('display', 'block');
        $("#find_cours").css('color', '#046380');
        $.ajax({
            type: 'POST',
            //url : 'prod/script/recherche/ajax_motcle.php',
            url: '/script_veto/recherche/ajax_motcle.php',
            data: {
                motcle: motcle,
                filtre: filtre,
            },
            success: function(data) {
                $("#wait").css('display', 'none');
                $('#resultat_box').html(data);
            },
        });
    }
});

merci d'avance pour la réponse :)

11/03/2014, 10h43
Odawin

Salut,

Regarde du côté de jquery UI, il propose un widget autocomplete très simple à utiliser et performant, t'auras plus de problème de latence logiquement. Et ça évite de taper du code pour rien :)

http://jqueryui.com/autocomplete/

Autrement, pour faire ça très simplement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(document).ready(function() {
    $("#find_filtre").on("change", function() {//changement du filtre
        if ($('#find_cours').val().length > 2){
            recherche();
        }
    });
    $("#find_cours").on("keyup", function() {//saisie de 3 lettre dans le champ recherche
        if ($('#find_cours').val().length > 2){
            recherche();
        }
    });
    //permet de fermer la fenêtre de recherche modal
    $("#modal_off").on("click", function() {
        $("#modal_recherche").css('display', 'none');
    })
 
    var xhr;
    function recherche() {
        var motcle = $("#find_cours").val(); //recupération du mot cle
        var filtre = $('#find_filtre').val(); //filtre all par default
        $("#wait").css('display', 'block'); //faire apparaître le loading
        $("#modal_recherche").css('display', 'block');
        $("#find_cours").css('color', '#046380');
        if (xhr != undefined) {
             xhr.abort(); //stopper la précédente requête ajax
        }
        xhr = $.ajax({
            type: 'POST',
            //url : 'prod/script/recherche/ajax_motcle.php',
            url: '/script_veto/recherche/ajax_motcle.php',
            data: {
                motcle: motcle,
                filtre: filtre,
            },
            success: function(data) {
                $("#wait").css('display', 'none');
                $('#resultat_box').html(data);
            },
            complete : function() {
                     xhr = undefined;
             }
        });
    }
});

merci de ta réponse Odawin,

si un résultat d'une liste de donnée j'ai déjà utiliser ceci mais là c'est du html ?

je vais essayé de montrer ce que j'obtiens en résultat voici la requête
Code:

1 2 3 4 5 6 7 //recherche le mot clé dans le titre du module $sql = "SELECT id,fullname,summary FROM course WHERE fullname LIKE '%" . self::$motcle . "%' OR shortname LIKE '%" . self::$motcle . "%' OR summary LIKE '%" . self::$motcle . "%'"; $result = self::$db->get_records_sql($sql); var_dump($result);
voici ce que j'obtiens comme résultat var_dump

Citation:

array(15) { [21]=> object(stdClass)#161 (3) { ["id"]=> string(2) "21" ["fullname"]=> string(27) "S08.13" ["summary"]=> string(508) "

Objectifs : Connaître les pricipales intoxications animales, les moyens du diagnostic et le traitement.

Mots clefs : toxicologie,

(Crédits : 3,8)
" } [27]=> object(stdClass)#160 (3) { ["id"]=> string(2) "27" ["fullname"]=> string(67) "S05.01, bien-être éthique" ["summary"]=> string(697) "

Objectifs d'enseignement : la compréhension du comportement animal et maitriser l'abord et la manipulation des principales espèces d'intérêt vétérinaire.

Mots clefs : anatomie, physiologie

(Crédits : 3,8)

je ne sais pas si je vais réussir à auto compléter un ensemble html ?
ou peut être que je dois le faire en 2 requêtes ?
d'abord le titre du module (fullname),
ensuite j'affiche le reste ce qu'il y a à l'intérieur du module ?

11/03/2014, 11h11
keokaz
merci Spartacusply
je vais testé ça ...

ça fonctionne très bien, peut m' expliquer comment ça fonctionne ?

j'ai pas bien saisie ,si la requête ne renvoie pas pour le moment de résultat en attendant le retour,
on quitte avec
Code:

1 2 xhr.abord();
mais que ce passe t'il quand la personne arrête de taper , et que la dernière réponse est envoyé en client ?

dans cette ligne ellle pris en compte à chaque fois qu'on fait un keyup ?
Code:

1 2 3 4 complete:function(){ xhr=undefined }
11/03/2014, 13h26
Spartacusply

C'est très simple, on arrête la précédente requête ajax quand on en lance une (avec xhr.abort(), tu l'avais bien compris). Le "undefined" dans complete indique, que quand la requête ajax est terminée d'être traitée, qu'il y en a plus en cours justement.

Citation:

Envoyé par Spartacusply

Autrement, pour faire ça très simplement :

Code:

xhr.abort(); //stopper la précédente requête ajax

Bonsoir

Déclencher et annuler plusieurs transactions AJAX est une opération coûteuse, je propose de différer la recherche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var jObjFiltre = $( "#find_filtre" ),
    jObjCours = $( "#find_cours" ),
    ObjTimeout = null;
 
function différerRechercher(){
    if ( ObjTimeout ){
 
        // debug
        //console.log( "clearTimeout" );
 
        clearTimeout( ObjTimeout );
    };
 
    ObjTimeout = setTimeout( function(){
 
        if ( jObjCours.val().length > 2 ){
 
            // debug
            //console.log( jObjCours.val(), jObjFiltre.val() );
 
            $( "#wait" ).css( 'display', 'block' );
            $( "#modal_recherche" ).css( 'display', 'block' );
            jObjCours.css( 'color', '#046380' );
 
            var jqXHR = $.post( "/script_veto/recherche/ajax_motcle.php", {
                "motcle" : jObjCours.val(),
                "filtre" : jObjFiltre.val(),
            });
 
            jqXHR.done( function( data, textStatus, jqXHR ){
                // succès de la transaction, on doit traiter le contenu de data
                console.log( data, textStatus, jqXHR );
 
                $( "#wait" ).css( 'display', 'none' );
                $( '#resultat_box' ).html( data );
 
            });
 
            jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
                // échec de la transaction, gérer la catastrophe
                console.log( jqXHR, textStatus, errorThrown );
 
            });
 
            jqXHR.always( function( jqXHR, textStatus ){
                // la transaction est terminée
                console.log( jqXHR, textStatus );
 
            });
        }
 
        ObjTimeout = null; // important
 
    }, 800 );
}
 
jObjFiltre.on( "change", différerRechercher );
 
jObjCours.on( "keyup", différerRechercher );