Twitter Bootstrap typeahead benutzerdefinierte Tastenkombination ENTER-Funktion

9

Ich arbeite mit Twitter-Bootstrap auf einer Django-Site, die ich mache. Ich habe eine Seite, auf der Benutzer alle ihre technischen Fähigkeiten in einer Texteingabe eingeben können, die mit einem Bootstrap Typeahead ausgestattet ist. Ich versuche, auf den Text innerhalb des aktuell ausgewählten Dropdown-Menüs zuzugreifen. Wenn ENTER gedrückt wird und ein Element in der Dropdown-Liste hervorgehoben wird, wird dieser Wert unter dem Eingabetextfeld angezeigt. Dann wird das Eingabetextfeld gelöscht und der Benutzer kann nach einer anderen Fähigkeit suchen.

%Vor%

Wenn das Dropdown-Menü sichtbar ist, dann übernimmt die Enter-Taste das aktuell aktive Element des Dropdown-Menüs und fügt es in das Textfeld ein (in Bootstrap integriert). Keine Alarmbox zeigt an. Irgendeine Idee, wie ich meine Funktion auslösen kann, bevor das passiert, dh bevor die Bootstrap-Funktion einsetzt?

    
Colin McDonnell 10.09.2013, 03:36
quelle

3 Antworten

23

Demo

Statt auf einen Tastendruck zu warten (was ist, wenn der Benutzer eine Auswahl mit der Maus trifft?), können wir die Vorteile des benutzerdefinierte Ereignisse Twitter's Typeahead emittiert. Nämlich,

  • typeahead:selected - Wird ausgelöst, wenn ein Vorschlag aus dem Dropdown-Menü explizit ausgewählt wurde.

Erfassung der Auswahl

Sie können mit jQuerys .on () Methode darauf achten und erhalten Informationen über die Auswahl des Benutzers im zweiten Argument.

%Vor%

Löschen des Eingabefeldes

Von dort aus kannst du mit selection.value machen, was du willst. Der einzige "Gotcha" würde versuchen, die Eingabe mit .val() zu löschen. Da Typeahead ziemlich viel schickes DOM-Rewriting durchführt, müssen Sie auch ihre Methode 'setQuery' verwenden.

%Vor%     
Sinetheta 10.09.2013, 04:46
quelle
7

Sie können den Listener wie nachfolgend beschrieben an Ihren Typehead-Code anhängen:

%Vor%     
JeppePepp 10.05.2014 23:52
quelle
0
___ qstntxt ___

Ich arbeite mit Twitter-Bootstrap auf einer Django-Site, die ich mache. Ich habe eine Seite, auf der Benutzer alle ihre technischen Fähigkeiten in einer Texteingabe eingeben können, die mit einem Bootstrap Typeahead ausgestattet ist. Ich versuche, auf den Text innerhalb des aktuell ausgewählten Dropdown-Menüs zuzugreifen. Wenn ENTER gedrückt wird und ein Element in der Dropdown-Liste hervorgehoben wird, wird dieser Wert unter dem Eingabetextfeld angezeigt. Dann wird das Eingabetextfeld gelöscht und der Benutzer kann nach einer anderen Fähigkeit suchen.

%Vor%

Wenn das Dropdown-Menü sichtbar ist, dann übernimmt die Enter-Taste das aktuell aktive Element des Dropdown-Menüs und fügt es in das Textfeld ein (in Bootstrap integriert). Keine Alarmbox zeigt an. Irgendeine Idee, wie ich meine Funktion auslösen kann, bevor das passiert, dh bevor die Bootstrap-Funktion einsetzt?

    
___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123jquery ___ jQuery ist eine beliebte Cross-Browser-JavaScript-Bibliothek, die das DOM-Traversal (Document Object Model), die Ereignisbehandlung, Animationen und AJAX-Interaktionen erleichtert, indem die Diskrepanzen zwischen Browsern minimiert werden. Eine mit jQuery gekennzeichnete Frage sollte mit jquery in Zusammenhang stehen, daher sollte jquery von dem fraglichen Code verwendet werden, und mindestens eine jquery-nutzungsbezogene Elemente müssen in der Frage enthalten sein. ___ antwort22196524 ___
%Vor%

Hier finden Sie die Dokumentation von typeahead Ссылка

    
___ tag123django ___ Django ist ein serverseitiges Open-Source-Webanwendungs-Framework, das in Python geschrieben wurde. Es wurde entwickelt, um den Aufwand für die Erstellung komplexer datengesteuerter Websites und Webanwendungen zu reduzieren, mit besonderem Fokus auf weniger Code, keine Redundanz und expliziter als implizit. ___ qstnhdr ___ Twitter Bootstrap typeahead benutzerdefinierte Tastenkombination ENTER-Funktion ___ tag123twitterbootstrap ___ Bootstrap ist ein Front-End-Framework, das entwickelt wurde, um die Entwicklung von Web-Apps und -Websites anzukurbeln. Bei Fragen zu einer Bootstrap-Version verwenden Sie auch die Tags der jeweiligen Version aus den Tags "twitter-bootstrap-2", "twitter-bootstrap-3" und "bootstrap-4". ___ answer18710896 ___

Demo

Statt auf einen Tastendruck zu warten (was ist, wenn der Benutzer eine Auswahl mit der Maus trifft?), können wir die Vorteile des benutzerdefinierte Ereignisse Twitter's Typeahead emittiert. Nämlich,

  • %code% - Wird ausgelöst, wenn ein Vorschlag aus dem Dropdown-Menü explizit ausgewählt wurde.

Erfassung der Auswahl

Sie können mit jQuerys .on () Methode darauf achten und erhalten Informationen über die Auswahl des Benutzers im zweiten Argument.

%Vor%

Löschen des Eingabefeldes

Von dort aus kannst du mit %code% machen, was du willst. Der einzige "Gotcha" würde versuchen, die Eingabe mit %code% zu löschen. Da Typeahead ziemlich viel schickes DOM-Rewriting durchführt, müssen Sie auch ihre Methode 'setQuery' verwenden.

%Vor%     
___ answer23587533 ___

Sie können den Listener wie nachfolgend beschrieben an Ihren Typehead-Code anhängen:

%Vor%     
___
Emiliooo 05.03.2014 11:32
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Warum bekomme ich "Der Name Regex existiert nicht im aktuellen Kontext" von meinem C # -Code?