Kürzlich, wenn es zu viele Dropdown-Optionen gibt, hoffe ich, Schlüsselwörter einzugeben, um nach Inhalten zu suchen, aber das Projekt war zu schnell vor dem Vorsprung. Ich hatte also keine Zeit, dies zu tun, weil ich hoffe, Inhalte mit nativen JS zu schreiben. Das Plug-In verwendet native JS, um die folgende Idee zu schreiben, um die folgende Idee zu schreiben
Schritt 1: Die Fninit -Implementierung initialisiert einige Felder
Schritt 2: Laden Sie die DIV im Suchfeld
Schritt 3: Implementieren Sie die Suchfunktion, löschen Sie den ursprünglichen Knoten und laden Sie den neuen Knoten
Schritt 4: Stellen Sie den Wert beim Klicken oder Eingeben fest
Code:
autocomplete.js
/** * @Summary AutoComplete * @Description Das Eingabefeld ruft automatisch die Dropdown-Option ab * @Version 0.0.1 * @file autoComplete.js * @author cangowu * @Contact [email protected] * @CopyRight Copyright 2016 Cangowu. * Dies ist ein Dropdown-Eingabefeld, das die Suche nach nativem JS automatisch abschließt. * Sie können die Maus -Auf- und Abtasten drücken und direkt mit der Maus klicken. () {function AutoComplete () {if (! Paraname: '', textfiled: '', Attributname des angezeigten Textwerts: '' ||. odefault.ValueFiled; URL wird übergeben und es wird keine Daten übergeben, AJAX erhält die Daten, anstatt die Daten zu erhalten, um die Daten zu erhalten, wenn (this.surl! adata var stextfield = this.stextfiled; einige notwendige Knoten var, dass dies eine entsprechende DIV erzeugt, die einige nachfolgende Optionen veranstaltet. Domdiv.Style.position = 'Absolute'; KeyUp -Ereignis, um einzugeben, dass.util.fnadDevent (that.dominput, 'keyUp', function (Ereignis) {that.fnSearch (Ereignis);}); this.fnloadSearchContent (); this.dominput.Value = this.ssearchValue; } this.dominput.Value = this.domdiv.childnodes [this.index] .Text; this.fnchangeClass (); } else if (event.keycode == 38) {this.index--; if (this.index <= -1) {this.index = Länge - 1; } else if (this.index == -1) {this.obj.value = this.ssearchValue; } this.dominput.Value = this.domdiv.childnodes [this.index] .Text; this.fnchangeClass (); } else if (Event.KeyCode == 13) {this.fnloadSearchContent (); this.fnshowdiv (); //this.domdiv.style.display = this.domdiv.style.display === 'None'? 'Block': 'keine'; this.index = -1; } else {this.index = -1; }}}, fnloadSearchContent: function () {// Alle untergeordneten Knoten löschen (this.domdiv.haschildnodes ()) {this.domdiv.removechild (this.domdiv.firstchild); } // den Suchwert this.ssearchValue = this.dominput.Value; // Wenn der Wert leer ist, wählen Sie, um var StrimsearchValue = this.ssearchValue.replace (/(^/s*) | (/s*$)/g, '') zu beenden. if (StrimsearchValue == "") {this.domdiv.style.display = 'none'; zurückkehren; } try {var reg = new regexp ("(" + striemsearchValue + ")", "i"); } catch (e) {return; } // Suchen und hinzufügen neuer Knoten var ndivindex = 0; für (var i = 0; i <thata.adata.length; i ++) {if (reg.test (this.adata [i] [this.StextFiled]) {var document = document.createelement ("div"); //div.classname="auto_onmouseout "; domdiv.text = this.adata [i] [this.StextFiled]; domdiv.onclick = this.fnsetValue (this); domdiv.onmouseover = this.fnautoonMouseover (this, ndivIndex); domdiv.innerhtml = that.adata [i] [this.StextFiled] .Replace (reg, "<strong> $ 1 </strong>"); // Die durchsuchten Zeichen zeigen dies. ndivindex ++; }}}. that.domdiv.style.display = 'none'; }}, fnautoonMouseover: function (that, idx) {return function () {that.index = idx; that.fnchangeClass (); }}, fnchangeClass: function () {var that = this; var länge = that.domDiv.Children.length; für (var j = 0; j <länge; j ++) {if (j! that.domdiv.childnodes [j] .style.color = '#000'; } else {that.domdiv.childnodes [j] .Style.backgroundcolor = 'blau'; that.domdiv.childnodes [j] .style.color = '#fff'; }}}, fnshowdiv: function () {if (this.domdiv.children.length! 'Block': 'keine'; }}, util: {// öffentliche Schnittstellenmethode fninStafter: function (ele, targetele) {var parentNode = targetele.parentnode || targetele.Parentelement; if (parentNode.lastchild == targetele) {parentNode.AppendChild (ele); } else {parentNode.insertBefore (ele, targetele.nextsibling); }}, fnadDeVent: function (ele, evt, fn) {if (document.adDeventListener) {ele.addeventListener (evt, fn, false); } else if (document.attachEvent) {ele.attachEvent ('on' + (evt == "Eingabe"? "PropertyChange": evt), fn); } else {ele ['on' + (evt == "Eingabe"? "PropertyChange": evt)] = fn; }}, fnget: function (url, fn, timeout) {var xhr = null; try {if (window.xmlhttpRequest) {xhr = new xmlhttpRequest (); } else if (window.activeXObject) {xhr = new ActiveXObject ("msxml2.xmlhttp"); }} catch (e) {// todo handhaben Sie die Ausnahme xhr = new ActiveXObject ('microsoft.xmlhttp'); } xhr.onReadyStatechange = function () {if (this.readyState == 4 && this.status == 200) {fn.call (this.responsetext); } else {setTimeout (function () {xhr.abort ();}, timeout); }}; xhr.open ('get', url, wahr); xhr.send (); }}} window.autocomplete = function (option) {var aoption = array.prototype.slice.call (Argumente); für (var i = 0; i <aoption.length; i ++) {var autocpromplete = new AutoComplete (); autocomplete.fninit (aoption [i]); autocomplete.fnrender (); } } })(Fenster);
index.html
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <Eingabe type = "text" id = "txtTest"> </div> <br> <divs> <Eingabe type = "id" id = "txtTest1"> </</<divs> <dives> <divtests " src = "autocpromplete.js"> </script> <script> window.onload = function () {var option = {id: 'txtTest', // Steuerung von ID -Daten: [{"id": "1", "name": "aaaaa"}, {"id": "2", "name": "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb." "Bbbwu Bb"}, {"ID": "2", "Name": "Bbbzbb"}], Paraname: 'Name', Textfiled: 'Name', // Der Attributname des angezeigten Textes angegeben: 'ID', // den Attributnamen des Wertes des Wertes ausgewählt: Funktion (val, text, text) {allert (val + 'text); } // Ereignis ausgelöst bei der Auswahl einer Option}; var option1 = {id: 'txtTest1', // Steuerung ID URL: 'Data.json', // Data Paraname: 'Name', Textfiled: 'Name', // Attributname des angezeigten Textes angegeben: 'id', // den Attributnamen des Wertes des Wertes ausgewählt: Funktion (val, text) {alert (val + '»'» '»' + '»' + '; } // Ereignis ausgelöst bei der Auswahl einer Option}; AutoComplete (Option, Option1); } </script> </body> </html>Data.json
[{"ID": "1", "Name": "aaaaa"}, {"id": "2", "Name": "BBBBB"}, {"ID": "3", "Name": "CCCCCC"}]Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.