Autocomplete Suchleiste zur Laufzeit

Question

Ich versuche, Autocomplete-Suche in Codeigniter zu machen, aber das Problem ist, dass die Liste zum ersten Mal geöffnet, wenn Benutzer in Eingabefeld schreiben, aber nicht entsprechend der Benutzereingabe geändert. es kommt nur beim ersten Mal vor.

hier ist mein Code:

<script> 
$(document).ready(function(){ 
    $('#text').keyup(function() { 
    var min_length = 0; 
    var keyword = $('#text').val(); 
    if (keyword.length >= min_length) { 
     $.ajax({ 
     url: 'http://localhost/new/index.php/travels/search_fields', 
     type: 'POST', 
     dataType: 'json', 
     data: { term: $("#text").val()}, 
     success: function(data) { 
      $.each(data, function() { 
      $.each(this, function(k, v) { 
       $("#demo").append("<li>" + v + "</li>"); 
      }); 
      }); 
     } 
     }); 
    } else { 
     $('#demo').hide(); 
    } 
    }); 
}); 
</script> 

und die Abfrage ist:

function search_field($country_id){ 
    $this->db->distinct(); 
    $this->db->select("destination"); 
    $this->db->from('travels_detail'); 
    $this->db->like('destination', $country_id); 
    $query = $this->db->get(); 
    return $query->result(); 

Answer 1

Sie berühren tatsächlich hier einige der schwierigsten Probleme mit AJAX auf, nämlich das Problem der Cancelling-Anfragen und die Tatsache, dass Anfragen in beliebiger Reihenfolge abgeschlossen werden können.

Nehmen wir an, der Benutzer gibt '123' in das Suchfeld ein. Sie würden dann drei Anfragen senden: "1", "12" und "123".

Zu diesem Zeitpunkt sind Sie nicht mehr an den Ergebnissen der ersten beiden Anfragen interessiert. Wie sich jedoch herausstellt, kann das Schreiben von Code, der dies richtig handhabt, schwierig sein. Ein weiteres Problem besteht darin, dass die Anforderungen in beliebige Reihenfolge abgeschlossen werden können. Nehmen wir zum Beispiel an, dass die Anfragen in umgekehrter Reihenfolge (3., 2., 1.) abgeschlossen werden. Sie würden dann wahrscheinlich nur die Ergebnisse für die erste Anfrage anzeigen, nicht die dritte, die Sie tatsächlich wollen.

Ein Schritt auf dem Weg zur Handhabung ist mit Promises. Sie können eine gute Einführung zu diesem Thema here finden. Eine gute Lösung für diese Art von Problem ist die RxJS Bibliothek. Dies ist eine ausgezeichnete Bibliothek, mit der Sie unter anderem asynchrone Sammlungen als Streams behandeln können. Es gibt sogar eine autocomplete example im RxJS-Repository. Allerdings ist Rx eine riesige Bibliothek mit vielen Funktionen und mehreren neuen Konzepten, die es am besten ist, zuerst mit Promises anzufangen.