Dans les projets réels, il est préférable d'utiliser des plug-ins écrits par d'autres pour implémenter des fonctions connexes. Cependant, afin d'économiser du temps et du coût, certains projets sont plus urgents et n'ont pas assez de temps pour écrire par vous-même. Même si vous écrivez, vous devez toujours passer beaucoup de temps à déboguer la compatibilité. Cependant, dans le but d'apprendre, vous pouvez utiliser votre temps libre pour écrire par vous-même, lire des choses JS natives et créer des plugins en fonction de vos propres idées, afin que vous puissiez améliorer votre niveau.
En parlant d'autoté sauté, de nombreuses personnes l'ont utilisé. Reportez-vous à Autotemplete.js, puis vous pouvez implémenter l'option déroulante invite lors de la saisie des valeurs dans la zone d'entrée. Il est similaire à la fonction invite de la boîte de recherche Baidu. Parlons de vos propres idées.
Ajouter un événement d'entrée à la zone d'entrée
1. Le code de compatibilité de l'événement d'entrée est le suivant:
AddEvt: 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; }}L'événement d'entrée est différent des autres événements. La version inférieure de IE ne prend pas en charge les événements d'entrée et ne peut utiliser que des événements PropertyChange. La version supérieure des navigateurs standard IE et W3C prend en charge les événements d'entrée.
2. Obtenez des données lorsque l'événement d'entrée est déclenché
Il existe deux formes de données ici, l'une est un tableau d'objets définis directement, et l'autre est une demande AJAX pour renvoyer les données
Pour le moment, nous avons besoin d'une fonction de demande Ajax et une demande de GET est écrite ici
get: function (url, paraobj, fn, timeout) {var xhr = null; essayez {//// compatible avec firefox, chrom if (window.xmlhttprequest) {xhr = new xmlhttprequest (); } ////// compatible avec ie 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); }}; var parastr = ''; Parastr + = "?"; pour (var prop dans paraOBj) {parast + = prop + "=" + paraOBj [prop] + "&"; } xhr.open ('get', parastr! = "?"? (URL + Parastr): url, true); xhr.send (); }3.
Créer un code de boîte déroulant:
createShowDiv: function () {/// Si le div de traction existe déjà, supprimez le var parentNode = this.autoElement.parentNode || this.Autoelement.pare-ParentElement; var childnodes = parentNode.childNodes; var showDiv = document.getElementById (this.config.showdivid); if (showDiv) {parentNode.RemoveChild (showDiv); } // Créer le trait div var div = document.createElement ('div'); div.id = this.config.showdivid; // Définissez le style DIV STYLE VAR STYLE = this.config.style || {width: '200px', hauteur: 'auto', backgroundColor: '# 1c5683', curseur: 'pointer', affiche: 'block'}; <br> pour (var prop dans le style) {div.style [prop] = style [prop]; } this.showdiv = div; }Ajouter le code d'option:
APPENDCHILD: fonction (données) {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 = 'solide'; child.style.bordertopcolor = «blanc»; child.setAttribute ('key', obj [self.config.valuefiled]); child.innerhtml = obj [self.config.TextFiled]; fragment.ApendChild (enfant); } self.showdiv.appendChild (fragment); self.util.insertafter (self.showdiv, self.autoelement); // Ajouter un événement de clic pour la boîte déroulante self.util.addevt (self.showdiv, 'click', fonction (e) {var evt = e || window.event; var cible = evt.srcelement || evt.target; var key = cible.getAttribute ("key"); var val = target.innerhtml; self.autoelement.valie = val; self.closedIv (); }Ce qui précède est quelques idées principales. Voyons maintenant comment encapsuler ces codes dans un objet et en faire un plug-in. Pour le moment, nous utilisons la fermeture anonyme:
(fonction (win) {var auto-assomple = function () {this.init.apply (this, arguments);} seho-assomplete.prototype = {//// ajouter le code d'opération pertinent init: {}, /// paramètres d'initialisation rende: {}, createShowDiv: {}, // Create Drop-down apelchchild: {}, // Ajouter un affichage: Create Drop-Down AppendChild: {}, // addition {}, //// Fermez la boîte de drop-down /////// objets d'outils, événements, demandes et fonctions pour les opérations de nœuds DOM Util: {addEvt: {}, /// Ajouter un événement insertafter: {}, /// ajouter un élément après un certain élément GET: {} //////ajax request}} win. Assublication automatique (paraObj) .Render ();}}) (fenêtre)Le code principal a été ajouté et nous afficherons le code d'implémentation spécifique:
(fonction (win) {var auto-complete = function () {this.init.apply (this, arguments);} automatique assule.prototype = {init: function () {var args = array.prototype.slice.call (arguments); if (args && args.length> 0) {var config. if (config && getType.call (config) == "[objet objet]") {// this.config = config; URL: '', // Ajax Url paraname: 'name', // ajax demandée paramètre: function () {}, // événement déclenché lors de la sélection des options, showdivid: '' // tirer vers le bas pour sélectionner l'identifiant}; document.getElementById (self.config.id); paraobj = {}; paraoBj [self.config.Paraname] = autoelement.value; if (! createShowDiv: function () {/// si le div de traction est déjà ParentNode.reMovechild (showDiv);} // Créer le DIV-DOWN VAR = Document.CreateElement ('Div'); 'pointeur', affichage: 'block'}; i ++) {var obj = data [i]; obj [self.config.valueFiled]); self.util.addevt (self.showdiv, 'click', fonction (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getAttribute ("key"); var val = cible.innerhtml; self.autoelement.value = val; self.closed (); self.config.select.call (self, key, val);});}, /// / clôturez la boîte de drop-down: function () {if (this.showdiv) {this.showdiv.style.display = 'nul'; {ele.addeventListener (evt, fn, false); élément insertafter: function (ele, ciblele) {var parentNode = ciblele.parentNode || ParaObj, fn, temps mort) {var xhr = null; xhr = new activeXObject ('Microsoft.xmlhttp');} xhr.onreadystateChange = fonction () {if (this.readystate == 4 && this.status == 200) {fn.call (this.responsEt); }; {Nouvelle assortie automatique (paraObj) .Render ();}}) (fenêtre)Ci-dessous est le code utilisé
Appel de page
window.onLoad = function () {AutoChyPlelet ({id: 'txtTest', // Control ID URL: '/ home / test4', // data Paraname: 'name', textfiled: 'name', // nom d'attribut du texte affiché: 'id', // Obtenez le nom d'attribut de la valeur //: ', {}, // Paramètres de style de l'attribut drop-down:', {}, // Paramètres de style de l'attribut Drop-Down: 'Url: {}, // Paramètres de style de l'attribut Drop-Down:' Url: {}, // Paramètres de style de l'attribut Drop Dowwow // URL demandée par ajax: fonction (val, texte) {alert (val + '---' + texte);}, // événements tirés lors de la sélection des options, showDiVid: 'showDiv' // extraire pour sélectionner l'ID de la région}); }); }Le code d'arrière-plan est le suivant, ici j'utilise MVC
public JSonResult test4 (nom de chaîne) {var list = new list <Student> (); list.add (nouveau étudiant {id = "1", name = "aaaaa"}); list.add (nouveau étudiant {id = "2", name = "aacc"}); list.add (nouveau étudiant {id = "3", name = "aabb"}); list.add (nouveau étudiant {id = "4", name = "bbcc"}); if (! string.isnullorempty (name)) {list = list.where (p => p.name.contains (name)). Tolist (); } return json (list, jsonrequestbehavior.allowget);}Maintenant que l'implémentation et l'appel de la fonction de base sont terminés, le processus du début à la fin est assez gênant. Chaque méthode est implémentée étape par étape, sans se référer à d'autres bibliothèques, et la compatibilité de chaque navigateur doit être prise en compte.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.