En proyectos reales, es mejor usar complementos escritos por otros para implementar funciones relacionadas. Sin embargo, para ahorrar tiempo y costos, algunos proyectos son más urgentes y no tienen tiempo suficiente para escribir por su cuenta. Incluso si escribe, aún tiene que pasar mucho tiempo de depuración de compatibilidad. Sin embargo, con el fin de aprender, puede usar su tiempo libre para escribir por usted mismo, leer algunas cosas JS nativas y hacer complementos de acuerdo con sus propias ideas, para que pueda mejorar su nivel.
Hablando de autotemplete, muchas personas lo han usado. Consulte autotemplete.js, y luego puede implementar la opción desplegable de solicitud al ingresar valores en el cuadro de entrada. Es similar a la función rápida del cuadro de búsqueda de Baidu. Hablemos de sus propias ideas.
Agregar evento de entrada al cuadro de entrada
1. El código de compatibilidad del evento de entrada es el siguiente:
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; }}El evento de entrada es diferente de otros eventos. La versión inferior de IE no admite eventos de entrada, y solo puede usar eventos de cambio de propiedad. La versión más alta de los navegadores estándar IE y W3C admite eventos de entrada.
2. Obtenga datos cuando se active el evento de entrada
Hay dos formas de datos aquí, una es una matriz de objetos de conjunto directo y la otra es una solicitud de AJAX para devolver datos
En este momento, necesitamos una función de solicitud de AJAX, y una solicitud GET se escribe aquí
get: function (url, paraoBj, fn, timeOut) {var xhr = null; Pruebe {//// Compatible con Firefox, Chrom if (window.xmlhttprequest) {xhr = new xmlhttprequest (); } ////// Compatible con IE más if (window.activexObject) {xhr = new ActiveXObject ("msxml2.xmlhttp"); }} catch (e) {// toDo manejar la excepción 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 ();}, timeout); }}; var parastr = ''; Parastr += "?"; for (var aprop en paraoBj) {parastr + = prop + "=" + paraoBj [prop] + "&"; } xhr.open ('get', parastr! = "?"? (url + parastr): url, verdadero); xhr.send (); }3. Cuando la solicitud AJAX es exitosa y hay datos, cree un cuadro desplegable y agregue opciones al cuadro desplegable //// Crear un Div desplegable
Cree un código de cuadro desplegable:
createShowDiv: function () {/// Si el DIV desplegable ya existe, elimine el var parentNode = this.aUtoelement.ParentNode || this.autoMement.ParentElement; var childNodes = parentNode.childNodes; var showDiv = document.getElementById (this.config.showDivid); if (showDiv) {parentNode.remoVechild (showDiv); } // crea el desplegable div var div = document.createElement ('div'); div.id = this.config.showdivid; // Establecer el estilo Div Div Var Style = this.config.style || {ancho: '200px', altura: 'auto', backgroundColor: '#1c5683', cursor: 'pointer', display: 'block'}; <br> for (var aprop de estilo) {div.style [prop] = style [prop]; } this.showDiv = div; }Código de opción de agregar:
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 = 'sólido'; Child.Style.BorderTopColor = 'White'; Child.SetAttribute ('Key', obj [self.config.valuefiled]); child.innerhtml = obj [self.config.textfiled]; fragment.appendChild (niño); } self.showdiv.appendChild (fragmento); self.util.instafter (self.showdiv, self.autoMement); // Agregue un evento de clic para el cuadro desplegable Self.util.addevt (self.showdiv, 'haga clic', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getAttribute ("key"); var val = target.innerhtml; self.auToelementementsementsement; self.config.select.call (self, key, val); }Lo anterior son algunas ideas principales. Ahora echemos un vistazo a cómo encapsular estos códigos en un objeto y convertirlos en un complemento. En este momento usamos el cierre anónimo:
(function(win) { var autocomplete= function() { this.Init.apply(this, arguments); } autocomplete.prototype = { ////Add relevant operation code Init: {}, ///Initialization parameters Render: {}, createShowDiv: {}, ///Create drop-down div appendChild: {}, ///Add display item closeDiv: {}, //// Cierre el cuadro desplegable //////// objetos de herramientas, eventos, solicitudes y funciones para operaciones de nodo DOM Util: {addevt: {}, /// Agregar evento InsertAfter: {}, /// Agregar elemento después de cierto elemento Get: {} ///////Jax Solicitar} Win.autocomplette = autocomplete (paraoBJ) .render ();Se ha agregado el código principal y mostraremos el código de implementación específico:
(function (win) {var autocomplete = function () {this.init.apply (this, argumentos);} autocomplete.prototype = {init: function () {var args = array.prototype.slice.call (argonments); if (args && args.length> 0) {var config = var [0]; var gettype) (config && getType.call (config) == "[objeto de objeto]") {// this.config = config; '', // AJAX Solicitado URL Paraname: 'Nombre', // Ajax Solicitud de parámetro Seleccionar: function () {}, // Evento activado al seleccionar opciones, showDivid: '' // extrae hacia abajo para seleccionar el ID de área}; document.getElementById (self.config.id); paraoBJ = {}; If (! function () {/// El Div Div ya existe, eliminar el VAR ParentNode = this.AUTOELMENT.PARENTNODE || // crea el desplegable Div var div = document.createElement ('div'); Div.Style [Prop] = Prop]; document.createElement ('div'); obj [self.config.textfiled]; Window.event; (this.showDiv) {this.showdiv.style.display = 'none'; ELE.ATTACHEVENT ('ON' + (EVT == "Input"? "Propertychange": Evt), fn); if (parentNode.lastChild == Targetele) {ParentNode.AppendChild (ELE); = nuevo xmlhttprequest (); (this. + "&";A continuación se muestra el código utilizado
Llamada de la página
Window.Onload = function () {AutoComplete ({id: 'txtTest', // Control id url: '/home/test4', // data paraname: 'name', textfiled: 'name', // nombre de atributo del texto mostrado: 'id', // el nombre de atributo del valor // estilo: {}, // establecimiento de estilo de la muestra de la revisión de división. // AJAX SELICITO URL SELECT: function (val, text) {alert (val + '---' + text); }); }El código de fondo es el siguiente, aquí estoy usando MVC
public JSONRESULT test4 (nombre de cadena) {var list = new list <druent> (); list.add (nuevo estudiante {id = "1", name = "aaaaa"}); list.add (nuevo estudiante {id = "2", name = "AACC"}); list.add (nuevo estudiante {id = "3", name = "aabb"}); list.add (nuevo estudiante {id = "4", name = "bbcc"}); if (! String.isNullorEmpty (name)) {list = list.where (p => p.name.contains (name)). tolist (); } return json (list, jsonRequestBehavior.Anlowget);}Ahora que la implementación y la llamada básica de la función están terminadas, el proceso desde el principio hasta el final es bastante problemático. Cada método se implementa paso a paso, sin referirse a otras bibliotecas, y la compatibilidad de cada navegador debe tenerse en cuenta.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.