実際のプロジェクトでは、他のプロジェクトが作成したプラグインを使用して関連する機能を実装することをお勧めします。ただし、時間とコストを節約するために、一部のプロジェクトはより緊急であり、自分で書くのに十分な時間がありません。書いたとしても、互換性のデバッグに多くの時間を費やす必要があります。ただし、学習の目的では、暇な時間を使用して自分で書いたり、ネイティブのJSのことを読んだり、自分のアイデアに従ってプラグインを作成して、レベルを向上させることができます。
AutoTempleteといえば、多くの人がそれを使用しています。 AutoTemplete.jsを参照してください。入力ボックスに値を入力するときに、プロンプトドロップダウンオプションを実装できます。 Baidu検索ボックスの迅速な機能に似ています。あなた自身のアイデアについて話しましょう。
入力ボックスに入力イベントを追加します
1.入力イベントの互換性コードは次のとおりです。
addevt：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; }}入力イベントは他のイベントとは異なります。 IEの低いバージョンは、入力イベントをサポートせず、PropertyChangeイベントのみを使用できます。 IEおよびW3C標準ブラウザのより高いバージョンは、入力イベントをサポートしています。
2。入力イベントがトリガーされたらデータを取得します
ここには2つの形式のデータがあります。1つは直接セットオブジェクトアレイで、もう1つはデータを返すためのAJAXリクエストです
現時点では、AJAXリクエスト関数が必要であり、GETリクエストがここに書かれています
get：function（url、paraobj、fn、timeout）{var xhr = null; try {//// firefox、Chromと互換性のあるif（window.xmlhttprequest）{xhr = new xmlhttprequest（）; } ///// ie 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）; }}; var parastr = ''; parastr += "？"; for（paraobjのvar prop）{parastr + = prop + "=" + paraobj [prop] + "＆"; } xhr.open（ 'get'、parastr！= "？"？（url + parastr）：url、true）; xhr.send（）; }3. AJAXリクエストが成功し、データがある場合は、ドロップダウンボックスを作成し、ドロップダウンボックスにオプションを追加////ドロップダウンDivを作成します
ドロップダウンボックスコードを作成します。
createshowdiv：function（）{///プルダウンdivが既に存在する場合、var parentnode = this.autoelement.parentnodeを削除します|| this.autoelement.parentelement; var Childnodes = parentnode.childnodes; var showdiv = document.getElementById（this.config.showdivid）; if（showdiv）{parentnode.removechild（showdiv）; } //プルダウンdiv var div = document.createelement（ 'div'）を作成します。 div.id = this.config.showdivive; //ドロップダウンDivスタイルvarスタイルを設定= this.config.style || {width： '200px'、height： 'auto'、backgroundcolor： '＃1C5683'、cursor： 'pointer'、display： 'block'}; <br> } this.showdiv = div; }オプションコードの追加：
appendChild：function（data）{var self = this; var data = data; var fragment = document.createdocumentfragment（）; for（var i = 0; i <data.length; i ++）{var obj = data [i]; var child = document.createelement（ 'div'）; child.style.width = self.showdiv.style.width; child.style.border = '1px'; child.style.borderStyle = 'solid'; child.style.bordertopcolor = 'white'; child.setattribute（ 'key'、obj [self.config.valuefiled]）; child.innerhtml = obj [self.config.textfiled]; fragment.appendChild（子）; } self.showdiv.appendchild（fragment）; self.util.insertafter（self.showdiv、self.autoelement）; //ドロップダウンボックスのクリックイベントを追加しますself.util.addevt（self.showdiv、 'click'、function（e）{var evt = e || window.event; var target = evt.srcelement || evt.target; self.config.select.call（self、key、val）; }上記はいくつかの主なアイデアです。それでは、これらのコードをオブジェクトにカプセル化し、プラグインにする方法を見てみましょう。この時点で、匿名の閉鎖を使用します。
（function（win）{var autocomplete = function（）{this.init.apply（this、arguments）;} autocomplete.prototype = {////関連する操作コードinit：{}、///初期化パラメーターレンダリング：{}、createshowdiv：{}、// {}、///ドロップダウンボックスを閉じますautocomplete（paraobj）.render（）;メインコードが追加されており、特定の実装コードを表示します。
（function（win）{var autocomplete = function（）{this.init.apply（this、arguments）;} autocomplete.prototype = {init：function（）{var args = array.prototype.slice.call（arguments）; if（args && args.length> 0）{var config = args [0]; gettype; if（config && gettype.call（config）== "[object object]）{// config = config || div url： ''、// ajaxはurlパラナミを要求します：// ajax要求パラメーター{}、// showdivid： '' //領域id}}}}}}}}} {var = config）; document.getElementByid（self.config.id）; autoelement = autoelement; paraobj = {} [self.config.value.value; （self.config.data）{self.config.data）} createshowdiv（）{///既に存在する場合、var deleting.autolentnode || ParentNode.RemoveChild（showdiv）// div document.id = this.config.showdividを作成します。 「ポインター」：for（var prope] = style [prop]; {var child.createlement.width.showdiv.style.width.border = '1px'; obj [self.valuefiled]）; self.util.addevt（self.showdiv、 'click'、function（e）{var evt = e || window.event; var target = evt.srcelement || evt.target; var key =ターゲット=ターゲット= gettribute（ "key"）; var val = target.innerhtml; self.bal; self.bal; self.bal; self.bal; self.bal; self.config.select.call（self、key、val）; （document.addeventlistener）{ele.addeventlistener（evt、fn、false）; fn; }、get request get：function（url、paraobj、timeout）{var xhr = null; } catch（e）{//例外xhr = new ActiveXObject（ 'microsoft.xmlhttp'）; xhr.abort（）; } win.autocomplete = function（paraobj）{new autocomplete（paraobj）.render（）}）（windo）以下は使用されているコードです
ページコール
window.onload = function（）{autocomplete（{id： 'txttest'、// control id url： '/home/test4'、// data paraname： 'name'、textfiled： 'name'、// displessed text： 'id'、// valueの属性名//スタイルの属性名を取得します。 // ajax要求url select：function（val、text）{alert（val + '---' + text）; }）; }背景コードは次のとおりです。ここではMVCを使用しています
public jsonresult test4（string name）{var list = new list <Student>（）; list.add（new Student {id = "1"、name = "aaaaa"}）; list.add（new Student {id = "2"、name = "aacc"}）; list.add（new Student {id = "3"、name = "aabb"}）; list.add（new Student {id = "4"、name = "bbcc"}）; if（！string.isnullorempty（name））{list = list.where（p => p.name.contains（name））。tolist（）; } return json（list、jsonrequestbehavior.allowget）;}基本的な関数の実装と呼び出しが終了したので、最初から最後までのプロセスは非常に面倒です。各メソッドは、他のライブラリを参照せずに段階的に実装され、各ブラウザの互換性を考慮する必要があります。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。