Optimierte Suche mit Ajax und Tastendruck

Lesezeit: 3 Minuten

Benutzer-Avatar
leora

Ich habe den folgenden Code, den ich verwenden möchte, um eine Datenbank zu durchsuchen, während ein Benutzer in ein Textfeld eingibt. Der folgende Code funktioniert gut, aber er scheint ein wenig ineffizient zu sein, als ob ein Benutzer sehr schnell tippt. Ich mache möglicherweise viel mehr Suchen als nötig. Wenn also ein Benutzer „Segeln“ eingibt, suche ich nach „segeln“, „saili“, „segeln“ und „segeln“.

Ich wollte sehen, ob es eine Möglichkeit gibt, eine bestimmte Zeit zwischen Tastendrücken zu erkennen, also nur suchen, wenn der Benutzer 500 Millisekunden oder so etwas mit der Eingabe aufhört.

Gibt es eine Best Practice für so etwas?

$('#searchString').keypress(function(e) {

    if (e.keyCode == 13) {

        var url="/Tracker/Search/" + $("#searchString").val();
        $.get(url, function(data) {
            $('div#results').html(data);
            $('#results').show();
        });
    }
    else {

        var existingString = $("#searchString").val();
        if (existingString.length > 2) {
            var url="/Tracker/Search/" + existingString;
            $.get(url, function(data) {
                $('div#results').html(data);
                $('#results').show();
            });
        }
    }

Sie können so etwas tun:

$('#searchString').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode == 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 500));
});
function search(force) {
    var existingString = $("#searchString").val();
    if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
    $.get('/Tracker/Search/' + existingString, function(data) {
        $('div#results').html(data);
        $('#results').show();
    });
}

Dies führt eine Suche durch (on keyupbesser als keypress für diese Situationen) nach 500ms durch Speichern eines Timers auf dem #searchString Element .data() Sammlung. Jeder keyup Es löscht diesen Timer, und wenn die Taste eingegeben wurde, sucht es sofort, wenn nicht, wird eine andere gesetzt 500ms Zeitüberschreitung vor der automatischen Suche.

  • Wenn jemand Probleme mit diesem Code hat, sehen Sie sich dies an: stackoverflow.com/a/1171758/849829

    – Deepak Thomas

    7. Dezember 2012 um 16:42 Uhr

  • Das Tippen und Suchen funktioniert bei mir, aber wenn ich die Eingabetaste drücke, wird die Seite neu geladen. Warum würde es passieren?

    – Joab Mendes

    26. Juli 2015 um 7:38 Uhr

  • @JoabR2D2 vielleicht hast du eine <form> Tag/Elternteil von Ihnen <input type='text'>

    – John Christian De Chávez

    28. Juli 2015 um 5:08 Uhr

  • @JohnChristianDeChavez ja, es war da, aber ich muss das Formular behalten und ich benutze ein prevenDefault(), um es zu lösen.

    – Joab Mendes

    28. Juli 2015 um 17:43 Uhr

  • @JoabR2D2 dann deine e.preventDefault() funktioniert nicht, weil es zu Ihrem Formularaktionsversuch umleitet return false kann sein. oder besser nicht verwenden a <form> markieren, wenn es nicht wirklich nötig ist.

    – John Christian De Chávez

    29. Juli 2015 um 3:43 Uhr


Benutzer-Avatar
Adam Asham

Siehe diese ältere Frage:

Wie lasse ich meine Live-jQuery-Suche eine Sekunde warten, bevor die Suche durchgeführt wird?

Was ich tun würde, ist, bei jedem Tastendruck eine setTimeout-Funktion mit der gewünschten Verzögerung zu verwenden. Diese Funktion wird also nach diesem Timeout ausgelöst. Jeder Tastendruck löscht dann den Timer und setzt einen neuen, mit clearTimeout();

Sehen Sie sich hier einige Beispiele an, indem Sie an allen Anzeigen vorbeiscrollen.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Ich möchte der Frage nur noch ein paar Punkte hinzufügen. Drosselungs- und Entprellkonzepte sind mit diesen Themen verwandt.

Drosselung:
Es wird Sie dazu bringen, die Funktion in einem bestimmten Intervall auszuführen.

Entprellen :
Sie werden aufgefordert, die Funktion auszuführen, wenn der Benutzer mit der Eingabe aufgehört hat.

Sie können dies durch die Funktionen settimeout und cleartimeout erreichen. Überprüfen Sie diesen Link, um eine klare Anleitung zu erhalten.

VERKNÜPFUNG

1257680cookie-checkOptimierte Suche mit Ajax und Tastendruck

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy