Discussion :

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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/

[Spartacusply]

Autrement, pour faire ça très simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 ?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
complete:function(){
  xhr=undefined
}

[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.

[danielhagnoul]

Autrement, pour faire ça très simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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