Em projetos reais, é melhor usar plug-ins escritos por outros para implementar funções relacionadas. No entanto, para economizar tempo e custo, alguns projetos são mais urgentes e não têm tempo suficiente para escrever por conta própria. Mesmo se você escrever, ainda precisará gastar muito tempo depatando a compatibilidade. No entanto, com o objetivo de aprender, você pode usar seu tempo livre para escrever sozinho, ler algumas coisas nativas do JS e fazer plugins de acordo com suas próprias idéias, para que você possa melhorar seu nível.
Falando em autotemplete, muitas pessoas o usaram. Consulte o AutoTemplete.js e, em seguida, você pode implementar a opção suspensa promntida ao inserir valores na caixa de entrada. É semelhante à função rápida da caixa de pesquisa do Baidu. Vamos falar sobre suas próprias idéias.
Adicione o evento de entrada à caixa de entrada
1. O código de compatibilidade do evento de entrada é o seguinte:
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; }}O evento de entrada é diferente de outros eventos. A versão inferior do IE não suporta eventos de entrada e só pode usar os eventos do PropertyChange. A versão superior dos navegadores padrão do IE e W3C suporta eventos de entrada.
2. Obtenha dados quando o evento de entrada for acionado
Existem duas formas de dados aqui, uma é uma matriz de objeto de conjunto direto e o outro é solicitação de Ajax para retornar dados
Neste momento, precisamos de uma função de solicitação de Ajax e uma solicitação GET é escrita aqui
get: function (url, paraobj, fn, timeout) {var xhr = null; tente {//// compatível com o firefox, crom if (window.xmlHttPrequest) {xhr = new XmlHttPrequest (); } ////// compatível com ie else if (window.activexObject) {xhr = new ActiveXObject ("msxml2.xmlHttp"); }} catch (e) {// TODO lide a exceção 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 ();}, tempo limite); }}; var parastr = ''; parastr += "?"; for (var prop no paraobj) {parastr + = prop + "=" + paraobj [prop] + "&"; } xhr.open ('get', parastr! = "?"? (url + parastr): url, true); xhr.send (); }3. Quando a solicitação do Ajax for bem-sucedida e há dados, crie uma caixa suspensa e adicione opções à caixa suspensa //// Crie uma divisão suspensa
Crie um código de caixa suspensa:
CreateShowDiv: function () {/// Se a divulgação de puxar já existir, exclua o var surnode = this.autoElement.parentnode || this.autoElement.parentElement; var ChildNodes = parentnode.childnodes; var showdiv = document.getElementById (this.config.showdivid); if (showdiv) {parentnode.removeChild (showdiv); } // Crie o Div Pull-Down var Div = Document.CreateElement ('Div'); div.id = this.config.showdivid; // Defina o estilo Div suspenso Var Style = this.config.style || {width: '200px', altura: 'Auto', BackgroundColor: '#1C5683', cursor: 'Pointer', Display: 'Block'}; <br> para (var Prop in Style) {div.style [prop] = estilo [prop]; } this.showdiv = div; }Anexar o código da opção:
AppendChild: function (dados) {var self = this; var dados = dados; var fragment = document.createCumentFragment (); for (var i = 0; i <data.length; i ++) {var obj = dados [i]; var filho = 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 (criança); } self.showdiv.appendChild (fragmento); self.util.insertafter (self.showdiv, self.autoElement); // Adicione um evento de clique para a caixa suspensa self.util.adDevt (self.showdiv, 'clique', function (e) {var evt = e || window.event; var Target = evt.srceLement || eVT.Target; var chave = Target.getTrribute ("key); var val = alvo.inHaMlMlMl; self.config.select.call (self, chave, val); }O exposto acima são algumas idéias principais. Agora, vamos dar uma olhada em como encapsular esses códigos em um objeto e torná-los um plug-in. Neste momento, usamos o fechamento 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: {}, ////Close the drop-down box/////// Tool objects, events, requests, and functions for dom node operations util: { AddEvt: {}, ///Add event insertAfter: {}, ///Add element after a certain element get: {} ///// Ajax get request} } win.Autocomplete= function(paraobj) { new AutoComplete (Paraobj) .render ();O código principal foi adicionado e exibiremos o código de implementação específico:
(function (win) {var autocomplete = function () {this.init.apply (this, argumentos);} autocomplete.prototype = {init: function () {var args = array.protype.slice.call (argumments); if (args && args.Length> 0) {var config = arg. if (config && gettype.call (config) == "[objeto objeto]") {// this.config = config; Div Url: '', // AJAX Solicitado paranome URL: 'Nome', // Parâmetro solicitado AJAX SELECT: function () {}, // Evento acionado ao selecionar opções, SHOWDIVID: '' // Puxe para selecionar o ID da área}; document.getElementById (self.config.id); Paraobj = {}; (! CreateSHOWDIV: function () {/// Se a divisão já existe, exclua o varrnode = this.autoElement.parentnode || ParentNode.RemoveChild (Showdiv); Exibir: 'Bloco'}; Data [i]; obj [self.config.valuefiled]); self.util.adDevt (self.showdiv, 'clique', function (e) {var evt = e || window.event; var alvo = evt.srceLement || evt.target; var key = target.getAttribute ("key"); var val = alvo.innerhtml; self.aUToement.Vribuie; self.config.Select.Call (self, chave, val); {ele.addeventlistener (EVT, fn, false); elemento após um elemento inserto: função (ele, Targetele) {var parentnode = TargetEle.Parentnode || TargetEle.ParenteLement; Paraobj, FN, Timeout) {var xhr = null; xhr = novo Activexobject ('Microsoft.xmlHttp'); var parastr = ''; AutoComplete (Paraobj) .render ();Abaixo está o código usado
Chamada de página
window.onload = function () {AutoComplete ({id: 'txttest', // URL de identificação de controle: '/home/test4', // paraname de dados: 'name', textfiled: 'name', // atributo Nome do texto exibido: 'id', // obtenha o nome do valor do valor // estilo: {}} // AJAX Solicitado URL Selecionar: function (val, texto) {alert (val + '---' + text); }); }O código de fundo é o seguinte, aqui estou usando o MVC
public jsonResult test4 (nome da string) {var list = new List <vertenty> (); list.add (novo aluno {id = "1", name = "aaaaa"}); list.add (novo aluno {id = "2", name = "aacc"}); list.add (novo aluno {id = "3", name = "aabb"}); list.add (novo aluno {id = "4", name = "bbcc"}); if (! string.isnullorEmpty (nome)) {list = list.where (p => p.name.contains (nome)). tolist (); } Return json (list, jsonRequestBehavior.allowget);}Agora que a implementação e a chamada da função básica estão concluídas, o processo do início ao fim é bastante problemático. Cada método é implementado passo a passo, sem se referir a outras bibliotecas, e a compatibilidade de cada navegador deve ser levada em consideração.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.