最近、ドロップダウンオプションが多すぎる場合、キーワードを入力してコンテンツを検索したいと考えていますが、プロジェクトは以前に急いでいたので、ネイティブJSでコンテンツを書くことを望んでいたので、プラグインはネイティブJSを使用して次のアイデアを書きます。
ステップ1： FNINIT実装では、一部のフィールドを初期化します
ステップ2：検索ボックスにdivをロードします
ステップ3：検索関数を実装し、元のノードを削除し、新しいノードをロードします
ステップ4：クリックまたは入力するときに値を設定します
コード：
autocomplete.js
/** * @summary autocomplete * @description入力ボックスは自動的にドロップダウンオプションを再取得します*これは、ネイティブJSに基づいて検索を自動的に完了するドロップダウン入力ボックスです。 *マウスの上下キーを押して、マウスで直接クリックすることができます *検索オプションを選択すると、いくつかの重要な場所にコメントがあります * *例： * csdnブログ：http：//blog.csdn.net/wzgdjm/article/details/51122615 * github：https：https：https：https：https：https：/comftub/ （）{function autocomplete（）{！パラナメ： ''、textfiled： ''、//表示されたテキスト値の属性： ''、// valueスタイルの属性名を取得します_option.id.data.data _ odefult.valuefult.tyle || date（）。 CORSOLE.LOG（data）; //this.domdiv.getelementbyid（this.sdive）、fnrendes（）{//対応するdivを生成します「#fff」; // domdivのみをdomdiv = document.getElementbyid（this.sdivion）;キー（keycode！= 13 && keycode！= keycode！= 40）{this.fnshowdiv（）; {this.index = 0; else if（this.index == length）{this.index ==）{this.dominput.value = this.searchvalue; } this.dominput.value = this.domdiv.childnodes [this.index] .text; this.fnchangeclass（）; } else if（event.keycode == 38）{this.index--; if（this.index <= -1）{this.index = length -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'？ 「ブロック」：「なし」; this.index = -1; } else {this.index = -1; }}}、fnloadSearchContent：function（）{//すべての子ノードを削除してください（this.domdiv.haschildnodes（））{this.domdiv.removechild（this.domdiv.firstchild）; } //検索値this.ssearchvalue = this.dominput.value; //値が空の場合は、var strimsearchvalue = this.ssearchvalue.replace（/（^/s*）|（/s*$）/g ''）を終了するように選択します。 if（strimsearchvalue == ""）{this.domdiv.style.display = 'none';戻る; } try {var reg = new regexp（ "（" + strimsearchvalue + "）"、 "i"）; } catch（e）{return; } //新しいノード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> $ 1 </strong>"）; //検索された文字はthis.domdiv.appendchild（domdiv）; ndivindex ++; }}}、fnsetValue：function（that）{return function（）{thit.dominput.value = this.text; that.domdiv.style.display = 'none'; }}、fnautoonMouseOver：function（that、idx）{return function（）{that.index = idx; that.fnchangeclass（）; }}、fnchangeclass：function（）{var that = this; var length = that.domdiv.children.length; for（var j = 0; j <length; j ++）{if（j！= that.index）{thit.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 ==== 'none'？ 「ブロック」：「なし」; }}、util：{// public interface method fninsertafter：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 == "input"？ "propertychange"：evt）、fn）; } else {ele ['on' +（evt == "input"？ "propertychange"：evt）] = fn; }}、fnget：function（url、fn、タイムアウト）{var xhr = null; try {if（window.xmlhttprequest）{xhr = new xmlhttprequest（）; } else if（window.activexobject）{xhr = new ActiveXObject（ "msxml2.xmlhttp"）; }} catch（e）{//例外を処理xhr = new ActiveXObject（ 'microsoft.xmlhttp'）; } xhr.oneadystatechange = function（）{if（this.readystate == 4 && this.status == 200）{fn.call（this、this.responsetext）; } else {setimeout（function（）{xhr.abort（）;}、timeout）; }}; xhr.open（ 'get'、url、true）; xhr.send（）; }}} window.autocomplete = function（option）{var aoption = array.prototype.slice.call（arguments）; for（var i = 0; i <aoption.length; i ++）{var autocomplete = new AutoComplete（）; autocomplete.fninit（aoption [i]）; autocomplete.fnrender（）; }}}）（window）;index.html
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> title> </ittitle> </head> <body> <div> <input type = "text" id = "txttest"> </div> <br> <div> <入力タイプ= "ID ="> < 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"}]、パラナル： 'name'、textfiled： 'name'、//表示されたテキストの属性名： 'id'、//値の値の属性名を取得します：bal、bal、 ' + } //オプションを選択するときにトリガーされるイベント}; var option1 = {id： 'txttest1'、// control id url： 'data.json'、// data paraname： 'name'、textfiled： 'name'、//表示されたテキストの属性名： 'id'、//値の値の値の属性名を取得：function（val、 ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' +' + ' + } //オプションを選択するときにトリガーされるイベント}; AutoComplete（option、option1）; } </script> </body> </html>data.json
[{"id"： "1"、 "name"： "aaaaa"}、{"id"： "2"、 "name"： "bbbbb"}、{"id"： "3"、 "name"： "cccccc}]]上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。