web-dev-qa-db-fra.com

Recherche optimisée à l'aide d'Ajax et de la touche

J'ai le code suivant que je souhaite utiliser pour rechercher une base de données lorsqu'un utilisateur tape dans une zone de texte. Le code ci-dessous fonctionne bien mais il semble un peu inefficace, comme si un utilisateur tapait très vite. Je fais potentiellement beaucoup plus de recherches que nécessaire. Donc, si un utilisateur tape "voile", je recherche "voile", "saili", "sailin" et "voile".

Je voulais voir s'il y avait un moyen de détecter un temps particulier entre les touches, donc ne recherchez que si l'utilisateur arrête de taper pendant 500 millisecondes ou quelque chose comme ça.

Existe-t-il une meilleure pratique pour quelque chose comme ça?

$('#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();
            });
        }
    }
jqueryajaxsearchkeypress
41
leora

Vous pouvez faire quelque chose comme ça:

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

Cela permet d'effectuer une recherche (sur keyup, mieux que keypress pour ces situations) après 500ms En stockant un minuteur sur l'élément #searchString - .data() collection . Chaque keyup efface ce temporisateur, et si la touche a été entrée, recherche immédiatement, si elle n'a pas défini un autre timeout 500ms Avant la recherche automatique.

87
Nick Craver

Voir cette ancienne question:

Comment puis-je faire attendre ma recherche jQuery en direct une seconde avant d'effectuer la recherche?

3
Adam Asham

Ce que je ferais, c'est que chaque pression sur une touche utilise une fonction setTimeout avec le délai souhaité. Cette fonction se déclenchera donc après ce délai. Appuyez sur chaque touche, puis supprimez le minuteur et définissez-en un nouveau, avec clearTimeout ();

Voir ici pour quelques exemples, faisant défiler toutes les annonces.

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

1
johnwards