Récemment, quand il y a trop d'options déroulantes, j'espère saisir des mots clés pour rechercher du contenu, mais le projet était trop précipité avant, donc je n'ai pas eu le temps de le faire parce que j'espère écrire du contenu avec JS natif, donc le plug-in utilise JS natif pour écrire l'idée suivante
Étape 1: La mise en œuvre de Fninit initialise certains champs
Étape 2: Chargez la div dans la zone de recherche
Étape 3: Implémentez la fonction de recherche, supprimez le nœud d'origine et chargez le nouveau nœud
Étape 4: Définissez la valeur en cliquant ou en entrant
Code:
Auto-Aomplete.js
/ ** * @Summary AutoClete's * @Description La boîte d'entrée récupère automatiquement l'option déroulante * @version 0.0.1 * @file automatique assuffle.js * @author Corgowu * @contact [email protected] * @copyright copyright 2016 Cangowu. * Il s'agit d'une boîte d'entrée déroulante qui termine automatiquement la recherche en fonction de JS natif. * Vous pouvez appuyer sur les touches de souris de haut en bas et de cliquer directement avec la souris * Sélectionnez l'option de recherche, et il y a des commentaires dans certains endroits clés * * Les exemples sont: * Blog CSDN: http://blog.csdn.net/wzgdjm/article/details/51122615 * github: https://ghub.com/cangowu/aAuplete * * / (fonction (fonction (fonction (fonction (fonction (fonction (fonction (fonction (fonction de la fonction () {Fonction Assumestre automatique () {si Paraname: '', TextFiled: '', // Nom d'attribut de la valeur de texte affichée: '', // Obtenez le nom d'attribut du style de valeur: {}, // Paramètre de style de la DRAD-DOWN DIV URL: '', // AJAX Url SELECT: function () {}, // Event déclenché par}; _option.data || this.style = _Option.style || odefault.style; Ajax obtient les données. this.StextFiled; this; 'Absolute'; That.util.fnaddevent (that.Dominput, 'keyup', function (event) {that.fnsearch (event);});}, fnsearch: function (event) {// juge si ce n'est pas la touche Entrée, effectuez une recherche lorsque l'événement de la clé if (event.keycode! = 40) 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 = longueur - 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 === 'Aucun'? «Block»: «Aucun»; this.index = -1; } else {this.index = -1; }}}, fnloadSearchContent: function () {// supprimer tous les nœuds enfants while (this.domDiv.haschildNodes ()) {this.domdiv.removechild (this.domDiv.firstchild); } // Définissez la valeur de recherche this.SSearchValue = this.Dominput.Value; // Si la valeur est vide, sélectionnez pour quitter var strimSearchValue = this.SsearchValue.replace (/ (^ / s *) | (/ s * $) / g, ''); if (strimSearchValue == "") {this.domdiv.style.display = 'Aucun'; retour; } essayez {var reg = new regexp ("(" + strimSearchValue + ")", "i"); } catch (e) {return; } // Rechercher et ajouter un nouveau nœud var ndivindex = 0; for (var i = 0; i <this.adata.length; i ++) {if (reg.test (this.adata [i] [this.stextfiled])) {var domdiv = 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 = this.adata [i] [this.stextfiled] .replace (reg, "<strong> $ $ </strong>"); // Les caractères recherchés montrent this.domdiv.appendChild (domdiv); ndivindex ++; }}}, fnsetValue: function (that) {return function () {that.dominput.value = this.text; that.domdiv.style.display = 'Aucun'; }}, fnAautoonMouseOver: function (that, idx) {return function () {that.index = idx; that.fnchangeclass (); }}, fnchangeclass: function () {var that = this; var longueur = that.domdiv.children.length; pour (var j = 0; j <longueur; j ++) {if (j! = that.index) {that.domDiv.childNodes [j] .style.backgroundColor = ''; that.domDiv.childnodes [j] .style.color = '# 000'; } else {that.domdiv.childnodes [j] .style.backgroundColor = 'Blue'; that.domDiv.childNodes [j] .style.color = '#fff'; }}}, fnshowDiv: function () {if (this.domdiv.children.length! == 0) {this.domdiv.style.display = this.domdiv.style.display === 'Aucun'? «Block»: «Aucun»; } e Targetlele.Parerentelement; if (parentNode.lastChild == TargetEle) {parentNode.ApendChild (ele); } else {parentNode.insertBefore (ele, ciblele.nextsibling); }}, fnaddevent: function (ele, evt, fn) {if (document.addeventListener) {ele.addeventListener (evt, fn, false); } else if (document.attachevent) {ele.attachevent ('on' + (evt == "entrée"? "PropertyChange": evt), fn); } else {ele ['on' + (evt == "input"? "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 gère l'exception xhr = new activeXObject ('Microsoft.xmlhttp'); } xhr.onreadystateChange = function () {if (this.readystate == 4 && this.status == 200) {fn.call (this, this.ResponSeText); } else {setTimeout (function () {xhr.abort ();}, tempsout); }}; xhr.open ('get', url, true); xhr.send (); }}} window.AutoCompletele = function (option) {var aoption = array.prototype.slice.call (arguments); for (var i = 0; i <aOption.length; i ++) {var AutoCerletel = new AutoChack (); Auto-Aomplete.fninit (aOPtion [i]); AutoChatle.fnRender (); } } })(fenêtre);
index.html
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <itle> title </ title> </ head> <body> <div> <input type = "text" id = "txtTest"> </div> <br> <v> <entrée type = "text" id = "txttest1"> </ / div> src="autoComplete.js"></script> <script> window.onload = function () { var option = { id: 'txtTest', //Control id data: [{ "id": "1", "name": "aaaaa" }, { "id": "2", "name": "bbbbbb" }, { "id": "2", "name": "bbbwu bb"}, {"id": "2", "name": "bbbzbb"}], paraname: 'name', textfiled: 'name', // le nom d'attribut du texte affiché déposé: 'id', // Obtenez le nom d'attribut de la valeur de la valeur sélectionnée: fonction (Val, texte) {alert (val + '' + texte); } // Événement déclenché lors de la sélection d'une option}; var option1 = {id: 'txtTest1', // Control ID URL: 'data.json', // data Paraname: 'name', textfiled: 'name', // nom d'attribut du texte affiché déposé: 'id', // Obtenez le nom d'attribut de la valeur de la valeur sélectionnée: fonction (val, text) {alert (val + '' + texte); } // Événement déclenché lors de la sélection d'une option}; Assublication automatique (option, option1); } </ script> </ body> </html>data.json
[{"id": "1", "name": "aaaaa"}, {"id": "2", "name": "bbbbb"}, {"id": "3", "name": "cccccc"}]Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.