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

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 fc86e7b705049fc9d4fccc89a2e80ee3 :

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

Vorteile: JS-Code speichern

Nachteile: IE 9 und niedriger und Safari unterstützen das fc86e7b705049fc9d4fccc89a2e80ee3 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>

js-Teil Der Code lautet wie folgt:

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

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:

ee4c45cf54483bcbeeb7b38dff558a3216b28748ea4df4d9c2150843fecfba68

Der js-Teil des Codes lautet wie folgt:

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

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 221f08282418e2996498697df914ce4e-Tag nicht direkt abrufen Im Projekt empfehle ich persönlich das ausgewählte Plug-In (Sie müssen selected.css und selected.js gleichzeitig einführen). Der HTML-Teil des Codes lautet wie folgt:

<select data-placeholder="Type &#39;C&#39; to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select>

Der js-Teil des Codes lautet wie folgt:

var config = {
　　'.chosen-select':{},
　　'.chosen-select-deselect':{allow_single_deselect:true},
　　'.chosen-select-no-single':{disable_search_threshold:10},
　　'.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
　　'.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
　　$(selector).chosen(config[selector]);
}

Hinweis: Bei Verwendung in Kombination mit Im modalen Modalfeld von Bootstrap wird die Dropdown-Liste nicht angezeigt und der .modal-body rechts. Der Grund, warum an der Seite eine Bildlaufleiste angezeigt wird, liegt darin, dass Bootstrap den Standardstil overflow-y:auto für .modal-body festlegt , daher besteht die Lösung darin, einen overflow-y:visible-Stil zu .modal-body hinzuzufügen, um ihn abzudecken.