jQuery UI automatische Vervollständigung mit Chrome-like autofill

Question

Ich bin mit dem den automatischen Vervollständigung jQuery UI-Funktionalität und, während ich einen Weg gefunden habe, die Autofill-Funktion zu implementieren, die ich suchte Funktionalität wie in der Google Chrome-Adressleiste. Wo der am besten passende Artikel ist auto-gefüllt, aber es nicht unterbricht Ihre Eingabe.

Jede Hilfe sehr geschätzt wird.

Answer 1

Ich schlage vor, Sie bei der Suche ältere jQuery Autocomplete-Plugin, die diese Option bietet integrierte Die Syntax ist ähnlich, sondern die Quelle als Möglichkeit, mit Ihnen, anstatt es als ersten Parameter initialisiert, mit dieser Syntax:.

$('input.autocomplete').autocomplete(data, {autoFill: true});

Die data muss entweder ein Array von Ergebnissen oder eine URL, dass die Punkte auf einem serverseitigen Skript sein, die es erzeugt. Für weitere Informationen siehe seine Dokumentation: http://docs.jquery.com/Plugins/Autocomplete

---

Zu beachten ist jedoch, dass der Autor dieses Plugins hält es für überflüssig, und die jQuery UI zum automatischen Vervollständigung sein Nachfolger. In einem ‚Wie migrieren‘ Posten, den er Benutzer zeigt nun auf, die rationale jQuery UI nicht die autofill Option, die erklärt:

  

Autofill: verweht keine unmittelbare   Ersatz zur Verfügung, für eine gute   Gründe: Das Standardverhalten, wenn   Auswählen von Elementen über die Tastatur jetzt puts   Der fokussierte Wert in den Eingang,   wie die Firefox AwesomeBar tut es.   Es ist nicht das gleiche wie das, was die Autofill   Option haben, aber es sollte nicht sein   Notwendigkeit, diese Wirkung zu erstellen.

Answer 2

$('#FELD').autocomplete( 
      source: "ajax/manager.json.php",
      minLength: 0, 
      change: function(event, ui) {
          found = false;
            $(".ui-autocomplete li").each(function(n, element){
              var retval = $(element).text().toUpperCase();
              var retval2 = $($(this).data()).attr('item.autocomplete');
              if ((found == false ) &&(retval == $("#FELD").val().toUpperCase()) )
              {
                $("#FELD").val(retval);
                $("#FELDID").val(retval2.id);
                found = true;
              }
            });
          if ( found == false) { $("#FELDID").val("-1"); }
      }
  }); `enter code here`