Twitter bootstrap typeahead benutzerdefinierte keypress ENTER Funktion

Arbeite ich mit Twitter bootstrap auf eine Django-Website, die ich mache. Ich habe eine Seite, wo Benutzer eingeben können alle Ihre technischen Fähigkeiten in einem text input ausgestattet mit einem bootstrap typeahead. Ich versuche, auf den text in der aktuell ausgewählten in dem dropdown-Menü, so dass, wenn die EINGABETASTE gedrückt wird, und ein element hervorgehoben ist in der dropdown-Liste auswählen, nimmt es den Wert und zeigt ihn unterhalb der input-text-Feld. Dann das input-text-Feld wird gelöscht, und der Benutzer kann die Suche nach einer anderen Fertigkeit.

$(document).keyup(function(event) {
    if (event.keyCode == 13) {    
      if ($('.dropdown-menu').css('display') != 'none'){
        var newskill = $(".dropdown-menu > li.active").val();
        alert('Yay');
      }
      else{
        var newskill = $("#enterbox").val();
        alert('Boo');
      }      
      return false;
    }
  });

Wenn das dropdown sichtbar ist, dann die enter-Tastendruck-Funktion nimmt das aktuell aktive element der Dropdownliste, und fügt ihn in das Textfeld ein (gebaut auf Bootstrap). Keine alert-box zeigt. Irgendeine Idee, wie kann ich meine Funktion auszulösen, bevor das passiert, dh bevor die Bootstrap-Funktion einsetzt?

InformationsquelleAutor Colin McDonnell | 2013-09-10

24

Demo

Statt zuzuhören, für einen Tastendruck (was ist, wenn der Benutzer eine Auswahl mit der Maus?), wir können die Vorteile der benutzerdefinierte Ereignisse Twitter Typeahead emittiert. Nämlich,
- typeahead:selected – Ausgelöst, wenn ein Vorschlag aus dem dropdown-Menü explizit ausgewählt werden.
Erfassung der Auswahl

Können Sie hören, indem man die jQuery - .auf() Methode, und Sie werden mit Informationen über die Benutzer-Auswahl im zweiten argument.
```
$('input.typeahead').on('typeahead:selected', function(event, selection) {
  alert(selection.value);
});
```
Clearing das Eingabefeld

Von dort aus können Sie tun, wie Sie mit der selection.value. Die einzige "gotcha" wäre, versuchen, deaktivieren Sie die Eingabe mit .val(). Da Typeahead macht ziemlich viel Lust auf DOM-Manipulation, müssen Sie nutzen Ihre 'setQuery' - Methode sowie.
```
$('input.typeahead').typeahead('setQuery', '');
```
Danke! Das ist genau das was ich brauchte. Wo ist diese info in die Doku?!
oder github.com/twitter/typeahead.js/issues/...
Nicht das gleiche @robin.gomez Die Frage hier war "wie führe ich eine Aktion nach der erfolgreichen Auswahl", das Problem, das Sie verwiesen wird, ist "wie mache ich die enter-Taste wählen Sie das erste Anregung".

InformationsquelleAutor Sinetheta

Yo befestigen Sie die Zuhörer auf Ihre typeahead-code wie unten;

 $('#input').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'some name',
        displayKey: 'value',
        source: data.ttAdapter(),

    }).on('keyup', this, function (event) {
        if (event.keyCode == 13) {
            $('#input').typeahead('close');
        }
    });

InformationsquelleAutor JeppePepp

$(document).keyup(function(event) {
    if (event.keyCode == 13) {    
    $('#yourtextbox').val("");  
    $('#yourtextbox').typeahead('close');
    }
  });

finden Sie die Dokumentation der typeahead hier https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

InformationsquelleAutor Emiliooo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Erfassung der Auswahl

Clearing das Eingabefeld