Das jQuery-Plug-in implementiert die Eingabe und das automatische Matching-Dropdown-Feld-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Das jQuery-Plug-in implementiert die Eingabe und das automatische Matching-Dropdown-Feld

高洛峰

Dec 09, 2016 am 11:46 AM

jquery

Um eine Eingabe- und Dropdown-Box mit automatischer Matching-Funktion zu implementieren, habe ich die folgenden Methoden ausprobiert:

1. Verwenden Sie direkt das neue Tag :

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

Nach dem Login kopieren

Vorteile: JS-Code speichern

Nachteile: IE 9 und niedriger und Safari unterstützen das nicht. Tag (Es scheint, dass mehrere Browser dies nicht unterstützen); wiederholtes Klicken auf das Eingabefeld oder das Dropdown-Symbol kann den Stil nicht wiederherstellen

2. Verwenden Sie das Plug-in „select2“; Basierend auf jQuery (select2.css und select2.js müssen eingeführt werden) lautet der HTML-Teil des Codes wie folgt:

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

Nach dem Login kopieren

js-Teil Der Code lautet wie folgt:

$(&#39;.select2_test&#39;).select2({
 placeholder: "请选择所属选项",
 allowClear: true;
});

Nach dem Login kopieren

Hinweis: Bei Verwendung in Verbindung mit der Modal-Modalbox von Bootstrap tritt ein Problem mit der Dropdown-Liste auf Die Liste wird am unteren Rand der Maskenebene angezeigt und auf die Schaltfläche zum Schließen des Popup-Felds wird geklickt, aber die Dropdown-Liste verschwindet nicht. Ich habe lange danach gesucht. Das Problem liegt im Stylesheet „select2.css“. 🎜>

Grund: Klicken Sie auf das Eingabefeld, dieses Plug-in generiert eine Maskenebene (Klassenname.select2-drop-mask) und eine Dropdown-Liste (Klassenname .select2-drop), die Kaskadierung (z -index) der beiden ist 9991, 9992, aber die Kaskadierung des modalen Popup-Felds ist größer als 10000, sodass die beiden oben genannten Probleme auftreten

Lösung: Wenn Sie den Z-Index von erhöhen. Wenn Sie select2-drop-mask und .select2-drop auf 19991 bzw. 19992 setzen, wird die Dropdown-Liste erfolgreich darauf angezeigt. Wenn Sie jedoch bei geöffneter Dropdown-Liste auf die Schaltfläche „Schließen“ des modalen Popup-Felds klicken, wird diese angezeigt Ziehen Sie zuerst das Dropdown-Feld zurück und klicken Sie erneut darauf, um das Popup-Fenster zu schließen. Hier können Sie versuchen, den Z-Index der Schaltfläche zum Schließen zu erhöhen Es darf kein modales Popup-Feld sein, da sonst der erhöhte Z-Index ungültig wird.

3. Der Hauptgrund für die oben genannten Unannehmlichkeiten von select2.js ist, dass der Fokusverlust von select2-drop nur durch Klicken auf select2-drop-mask ausgelöst werden kann ist ein weiteres jQuery-basiertes Dropdown-Suchfeld-Plug-in magicsuggest (magicsuggest.css und magicsuggest.js müssen gleichzeitig eingeführt werden). Der HTML-Teil ist sehr einfach und direkt:

Der js-Teil des Codes lautet wie folgt:

$(&#39;#magicsuggest&#39;).magicSuggest({
　　placeholder:&#39;&#39;，
　　allowFreeEntries: false,
　　maxSelection:1,
　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: [&#39;Paris&#39;, &#39;New York&#39;, &#39;Gotham&#39;]
});

Nach dem Login kopieren

Wählen Sie

Nachteile: Da Es gibt viele redundante Stile (Schatten, Hervorhebung, Fehleraufforderung, Mehrfachauswahl), und der Stil muss entsprechend den spezifischen Anforderungen angepasst werden. Der Wert des ursprünglichen Eingabefelds kann nicht direkt über den Wert $(this).val() abgerufen werden Wenn die Datenmenge zu groß ist, kommt es zu einer Verzögerung beim Laden

4 Da es sich bei dem oben genannten Standard-Plug-in um einen Mehrfachauswahlstil handelt, können Sie den Wert im