In den tatsächlichen Projekten ist es am besten, Plug-Ins zu verwenden, die von anderen geschrieben wurden, um verwandte Funktionen zu implementieren. Um Zeit und Kosten zu sparen, sind einige Projekte jedoch dringlicher und haben nicht genug Zeit, um selbst zu schreiben. Selbst wenn Sie schreiben, müssen Sie noch viel Zeit damit verbringen, Kompatibilität zu debuggen. Zum Zweck des Lernens können Sie jedoch Ihre Freizeit verwenden, um selbst zu schreiben, einige native JS -Dinge zu lesen und Plugins nach Ihren eigenen Ideen zu erstellen, damit Sie Ihr Niveau verbessern können.
Apropos Autotemplete, viele Menschen haben es benutzt. Siehe autotemPlete.js, und dann können Sie die Dropdown-Option Eingabeaufforderung implementieren, wenn Sie Werte in das Eingabefeld eingeben. Es ähnelt der Eingabeaufforderung des Baidu -Suchfelds. Sprechen wir über Ihre eigenen Ideen.
Fügen Sie dem Eingangsfeld Eingabeereignis hinzu
1. Der Kompatibilitätscode des Eingabeereignisses lautet wie folgt:
Addevt: 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; }}Das Eingabeereignis unterscheidet sich von anderen Ereignissen. Die untere Version von IE unterstützt keine Eingabeereignisse und kann nur PropertyChange -Ereignisse verwenden. Die höhere Version von IE und W3C Standard Browsern unterstützt Eingabeereignisse.
2. Erhalten Sie Daten, wenn das Eingabeereignis ausgelöst wird
Hier gibt es zwei Datenformen, einer ist ein direktes Set -Objekt -Array, und der andere ist eine Ajax -Anforderung zur Rückgabe von Daten
Zu diesem Zeitpunkt benötigen wir eine AJAX -Anfrage -Funktion, und hier wird eine Get -Anfrage geschrieben
GET: Funktion (URL, Paraobj, Fn, Timeout) {var xhr = null; try {//// kompatibel mit Firefox, Chrom if (window.xmlhttprequest) {xhr = new Xmlhttprequest (); } ////// kompatibel mit IE 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); }}; var paraStr = ''; Parastr += "?"; für (var prop in paraobj) {parastr + = prop + "=" + paraobj [prop] + "&"; } xhr.open ('get', parastr! = "?"? (url + parastr): url, true); xhr.send (); }3. Wenn die AJAX-Anfrage erfolgreich ist und Daten vorhanden sind
Erstellen Sie einen Dropdown-Box-Code:
CreateShowDIV: function () {/// Wenn die Div-Div-DIV bereits vorhanden ist, löschen Sie die var parentNode = this.autoelement.parentnode || this.autoelement.Parentelement; var childnodes = parentNode.childnodes; var showdiv = document.getElementById (this.config.showdivid); if (showdiv) {parentNode.removechild (showdiv); } // Erstellen Sie das Pulld-div var div = document.createelement ('div'); div.id = this.config.showdivid; // Setzen Sie den Dropdown Div style var style = this.config.style || {width: '200px', Höhe: 'Auto', HintergrundColor: '#1C5683', Cursor: 'Zeiger', Anzeige: 'block'}; } this.showdiv = div; }Optionscode anhängen:
appendChild: function (data) {var self = this; var data = data; var fragment = document.createdocumentfragment (); für (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.borderSyle = 'Solid'; Child.Style.Bordertopcolor = 'White'; Child.SetAttribute ('Key', obj [self.config.Valuefiled]); child.innerhtml = obj [self.config.textfiled]; Fragment.AppendChild (Kind); } self.showdiv.AppendChild (Fragment); self.util.insertafter (self.showdiv, self.autoelement); // Ein Klickereignis für das Dropdown-Box self.util.addevt (self.showdiv, 'click', function (e) {var evt = e || Fenster.Event; var target = evt.srcelement || evt.target; var key = target.GetAttribute ("taste"); self.closediv (); }Das obige sind einige Hauptideen. Schauen wir uns nun an, wie Sie diese Codes in ein Objekt zusammenfassen und sie zum Plug-In machen. Zu diesem Zeitpunkt verwenden wir anonyme Schließung:
(Funktion (win) {var autoComplete = function () {this.init.apply (this, Argumente);} autoComplete.Prototype = {//// Relevante Operation Code init: {}, /// Initialisierungsparameter Render: {}, CreateshowDIV: {{}, //// //. Oder automatisch (paraobj) .render ();}}) (Fenster)Der Hauptcode wurde hinzugefügt, und wir werden den spezifischen Implementierungscode anzeigen:
(Funktion (win) {var autocpromplete = function () {this.init.Apply (this, argumente);} autocpromplete.prototype = {init: function () {var args = array.prototype.slice.call (arguments); if (args && argsgth> 0) {var konfiguriert; if (config && getType.call (config) == "[Objekt]") {// this.config = config; URL: '', // AJAX Angeforderte URL -Paraname: 'Name', // Ajax Angeforderte Parameter auswählen: Funktion () {}, // Ereignis ausgewählt, um Optionen auszuwählen, showDival: '' // Down, um die Flächen -ID auszuwählen}; document.getElementById (self.config.id); paraobj = {}; if (! Createshowdiv: Funktion () {/// Wenn die Pulldiv-Dive die Var-ParentNode = this.Autoelement.Parentnode || ParentNode.removild (Showdiv); Anzeige: '}; Daten [i]; obj [self.config.ValueFiled]); self.util.addevt (self.showdiv, 'click', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getAttribute ("key"); var val = target.innerhtml; self.Antoelement.valuement = val; self.config.select.call (self, key, val); Ele.AdDeventListener (evt, fn, false); insert: function (ele, targetele) {var parentNode = targetele.parentnode || Timeout) {var xhr = null; ActiveXObject ('microsoft.xmlhttp'); Parastr = ''; {Neue automatische Vervollständigung (paraobj) .render ();}}) (Fenster)Unten ist der verwendete Code
Seitenanruf
window.onload = function () {autocpromplete ({id: 'txtTest', // Steuerung ID URL: '/home/test4', // Daten paraname: 'name', SMSFILED: 'Name', // Attributname des angezeigten Textes: 'ID', // den Wert des Wertes abrufen. // AJAX angeforderte URL SELECT: Funktion (val, text) {alert (Val + '---' + text); }); }Der Hintergrundcode ist wie folgt. Hier verwende ich MVC
public JsonResult test4 (String -Name) {var list = new List <Student> (); list.add (neuer Schüler {id = "1", name = "aaaaa"}); list.add (neuer Schüler {id = "2", name = "aacc"}); list.add (neuer Schüler {id = "3", name = "aabb"}); list.add (neuer Schüler {id = "4", name = "bbcc"}); if (! string.isnullorEmpty (name)) {list = list.where (p => p.name.contains (name)). tolist (); } return JSON (Liste, JsonRequestBehavior.AllowGet);}Nachdem die grundlegende Funktion implementieren und auf dem Anruf abgeschlossen sind, ist der Prozess vom Anfang bis zum Ende ziemlich problematisch. Jede Methode wird Schritt für Schritt implementiert, ohne sich auf andere Bibliotheken zu beziehen, und die Kompatibilität jedes Browsers muss berücksichtigt werden.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.