Prädiktive Suchergebnisse:Jquery führt die Funktion aus, nachdem getJSON innerhalb der Keyup-Funktion abgeschlossen ist

Question

Ich habe hier viele Antworten zu verzögerten Techniken bei getJSON/Ajax-Anfragen gelesen, aber nichts scheint zu meinem Szenario zu passen.Ich lasse eine Sucheingabe eine Reihe von Ergebnissen zurückgeben, die auf einem getJSON-Aufruf nach 4 Zeichen basieren.Dadurch soll die Anzahl der zurückgegebenen Ergebnisse sowie die Anzahl der Ajax-Anfragen begrenzt werden (offen für effektivere Lösungen).

search_input.on('keyup', function() {

    var string       = $(this).val();
    var quiet_chars  = 4;

    if(string.length < quiet_chars) {

        // Simple notifications function which passes a message to a div, and optional class
        notification('Type '+(quiet_chars - string.length)+' more characters to search');
    }
    if(string.length == quiet_chars) {
        notification('Searching...', 'loading');
        $.getJSON('stores/stores-search/'+string, function(data) {

            // Loop through data and build list....
            $('.search_results').html('<ul>'+list_html+'</ul>');

            // Function which shows/hides list items based on Jquery :contains
            searchResults(string);

        });
    }
    if(string.length > quiet_chars) {
        searchResults(string);
    }

});

Das spezifische Problem, mit dem ich konfrontiert bin, ist, wenn Sie schnell 5 (mehr als 4) Zeichen eingeben if(string.length > quiet_chars) Bedingung ist vorher erfüllt $('.search_results').html('<ul>'+list_html+'</ul>'); wurde ausgeführt und teilt dem Benutzer mit, dass keine Suchergebnisse vorhanden sind.

Ich muss das treffen if(string.length > quiet_chars) Bedingung, um die zurückgegebenen Ergebnisse weiter zu filtern, jedoch erst, nachdem die Liste aus der getJSON-Anfrage an das DOM angehängt wurde.Danke.

Answer 1

Hat funktioniert!

var json_success = false,
    ajax_term;

function searchJson(string) {
    ajax_term = string;
    notification('Searching...', 'loading');
    $.getJSON('stores/stores-search/'+string, function(data) {

        // Loop through data and build list....
        $('.search_results').html('<ul>'+list_html+'</ul>');
        searchResults(string);
        json_success = true; 

    });
}

search_input.on('keyup', function() {

    var string       = $(this).val();
    var quiet_chars  = 4;

    if(string.length < quiet_chars) {
        json_success = false;
        notification('Type '+(quiet_chars - string.length)+' more characters to search');
    } else {

        if(json_success !== false || string.substr(0,4) !== ajax_term) {
            $.when(searchJson(string)).then(searchResults(string))
        } else {
            searchResults(string)
        }
    }
});

Von hier: https://stackoverflow.com/questions/5280699#5291067

Falls jemand versucht, etwas Ähnliches zum Laufen zu bringen, hier ist meine Suchergebnisfunktion:

//extends :contains to be case insensitive
$.extend($.expr[':'], {
    'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

// Instant search results
function searchResults(searchTerm) {

    var searchSplit = searchTerm.replace(/ /g, "'):containsi('");

    $(".search_results .tile").not(":containsi('" + searchSplit + "')").each(function() {
        $(this).addClass('hide').removeClass('show');
    });
    $(".search_results .tile:containsi('" + searchSplit + "')").each(function() {
        $(this).removeClass('hide').addClass('show');
    });

    var resultCount = $('.search_results .show').length;

    if(resultCount != '0') {
        notification('Showing '+resultCount+' results');
    } else {
        notification('No results', 'error');
    }
}

Dank für die Version von, bei der die Groß- und Kleinschreibung nicht beachtet wird :contains geht zu Rob Sawyer.

Answer 2

bearbeitet, um Ihre Spezifikationen anzupassen

generasacodicetagpre.