Native js implémente les compétences de plug-in_javascript de saisie semi-automatique

Dans les projets réels, il est préférable d'utiliser des plug-ins écrits par d'autres pour implémenter les fonctions associées afin d'économiser du temps et des coûts, car certains projets sont plus urgents et vous n'avez pas assez de temps pour les écrire vous-même. Même si vous l'écrivez, vous passez également beaucoup de temps à déboguer la compatibilité. Mais dans le but d'apprendre, vous pouvez utiliser votre temps libre pour écrire par vous-même, lire des choses en js natif et créer des plug-ins selon vos propres idées, ce qui peut améliorer votre niveau.
En parlant d'autotemplete, de nombreuses personnes l'ont utilisé. En citant autotemplete.js, vous pouvez demander des options déroulantes lors de la saisie des valeurs dans la zone de saisie, similaire à la fonction d'invite du champ de recherche Baidu. Parlons de mes idées ci-dessous.
Ajouter un événement d'entrée à la zone de saisie
1.Le code de compatibilité des événements 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 == "input" ? "propertychange" : evt), fn);
      } else {
        ele['on' + (evt == "input" ? "propertychange" : evt)] = fn;
      }
    }

L'événement d'entrée est différent des autres événements. Les versions inférieures d'IE ne prennent pas en charge les événements d'entrée et ne peuvent utiliser que les événements de changement de propriété. Les versions supérieures d'IE et les navigateurs standard du w3c prennent 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 les données renvoyées par la requête ajax
Pour le moment, nous avons besoin d'une fonction de requête ajax, voici une requête 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) {
          //TODO handle the 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();
            }, timeout);
          }
        };
        var parastr = '';
        parastr += "?";
        for (var prop in paraobj) {
          parastr += prop + "=" + paraobj[prop] + "&";
        }
         xhr.open('get', parastr != "?" ? (url + parastr) : url, true);
         xhr.send();
 
      }

3. La requête ajax réussit et lorsqu'il y a des données, créez une liste déroulante et ajoutez des options à la liste déroulante ////Créez une Div déroulante
Créer un code de liste déroulante :

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.showdivId;
      //设置下拉div样式
      var style = this.config.style || {
        width: '200px',
        height: 'auto',
        backgroundColor: '#1c5683',
        cursor: 'pointer',
        display: 'block'
      };<br>     
      for (var prop in style) {
        div.style[prop] = style[prop];
      }
      this.showdiv = div;
    }

Ajouter le code d'option :

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(child);
      }
      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;
        var key = target.getAttribute("key");
        var val = target.innerHTML;
        self.autoElement.value = val;
        self.closeDiv();
        self.config.select.call(self, key, val);
      });
    }
 

Voici les principales étapes. Voyons maintenant comment encapsuler ces codes dans un objet et en faire un plug-in. Pour le moment, nous utilisons la fermeture anonyme :

(function(win) {
  var autocomplete= function() {
    this.Init.apply(this, arguments);
 
  }
 
  autocomplete.prototype = {
 
    ////添加相关操作代码
 
    Init: {}, ///初始化参数
 
    Render: {},
 
    createShowDiv： {}, ///创建下拉div
 
    appendChild: {}, ///在下拉div里面追加显示项
 
    closeDiv: {}, ////关闭下拉框
 
    //////工具对象，事件，请求，还有dom节点操作的函数
 
    util: {
 
      AddEvt： {}, ///添加事件
 
      insertAfter: {}, ///在某元素后面追加元素
 
        get: {} //// Ajax get请求
 
    }
 
  }
 
  win.Autocomplete= function(paraobj) {
    new autocomplete(paraobj).Render();
  }
})(window)

Le code du corps principal a été ajouté, montrons le code d'implémentation spécifique :

(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];
        var getType = Object.prototype.toString;
        if (config && getType.call(config) == "[object Object]") {
          //       this.config = config;
          this.config = config || {
            id: '', //控件id
            data: [], //数据
            textFiled: '', //显示的文字的属性名
            valueFiled: '', //获取value的属性名
            style: {}, //显示的下拉div的样式设置
            url: '', //ajax请求的url
            paraName:'name',//ajax请求的参数
            select: function() {}, //选择选项时触发的事件,
            showdivId: '' //下拉选择区域的id
          };
        }
      }
    },
    Render: function() {
      var self = this;
      if (self.config) {
        var autoElement = document.getElementById(self.config.id);
        this.autoElement = autoElement;
        if (autoElement) {
          self.util.AddEvt(this.autoElement, 'input', function() {
            try {
              if (autoElement.value) {
                ////ajax请求获取数据的方式
                if (self.config.url && !self.config.data) {
                  var paraobj = {};
                  paraobj[self.config.paraName] = autoElement.value;
                  self.util.get(self.config.url, paraobj, function (data) {
                    self.createShowDiv();
                    self.appendChild(eval('(' + data + ')'));
                  }, 10000);
                }
                ////直接设置对象数组的形式
                else if
                  (!self.config.url && self.config.data) {
                  self.createShowDiv();
                  self.appendChild(self.config.data);
                }
 
              } else {
                self.closeDiv();
              }
 
            } catch (e) {
              //TODO handle the exception
              alert(e);
            }
          });
        }
 
      }
    },
    ////创建下拉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.showdivId;
      //设置下拉div样式
      var style = this.config.style || {
        width: '200px',
        height: 'auto',
        backgroundColor: '#1c5683',
        cursor: 'pointer',
        display: 'block'
      };
      for (var prop in style) {
        div.style[prop] = style[prop];
      }
      this.showdiv = div;
    },
    ///在下拉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(child);
      }
      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;
        var key = target.getAttribute("key");
        var val = target.innerHTML;
        self.autoElement.value = val;
        self.closeDiv();
        self.config.select.call(self, key, val);
      });
    },
    ////关闭下拉框
    closeDiv: function () {
      if (this.showdiv) {
        this.showdiv.style.display = 'none';
      }
 
    }
    ,
    util: {
      ///添加事件
      AddEvt: function(ele, evt, fn) {
        if (document.addEventListener) {
          ele.addEventListener(evt, fn, false);
        } else if (document.attachEvent) {
          ele.attachEvent('on' + (evt == "input" &#63; "propertychange" : evt), fn);
        } else {
          ele['on' + (evt == "input" &#63; "propertychange" : evt)] = fn;
        }
      },
      ///在某元素后面追加元素
      insertAfter: function(ele, targetELe) {
        var parentnode = targetELe.parentNode || targetELe.parentElement;
        if (parentnode.lastChild == targetELe) {
          parentnode.appendChild(ele);
        } else {
          parentnode.insertBefore(ele, targetELe.nextSibling);
        }
      },
      ///Get请求
      get: function(url, paraobj, fn, timeout) {
        var xhr = null;
        try {
          if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
          } else if (Window.ActiveXObject) {
 
            xhr = new ActiveXObject("Msxml2.Xmlhttp");
          }
        } catch (e) {
          //TODO handle the 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();
            }, timeout);
          }
        };
        var parastr = '';
        parastr += "&#63;";
        for (var prop in paraobj) {
          parastr += prop + "=" + paraobj[prop] + "&";
        }
         xhr.open('get', parastr != "&#63;" &#63; (url + parastr) : url, true);
         xhr.send();
 
      }
    }
  }
 
  win.AutoComplete = function (paraobj) {
    new autocomplete(paraobj).Render();
 
  }
 
})(window)

Voici le code utilisé

Appel de page

window.onload = function () {
  AutoComplete({
    id: 'txtTest', //控件id
    url: '/Home/Test4', //数据
    paraName:'name',
    textFiled: 'name', //显示的文字的属性名
    valueFiled: 'id', //获取value的属性名
    //         style: {}, //显示的下拉div的样式设置
    //           url: '', //ajax请求的url
    select: function (val, text) {
      alert(val + '---' + text);
    }, //选择选项时触发的事件,
    showdivId: 'showDIv' //下拉选择区域的id});
  });
 
}

Le code de fond est le suivant, ici j'utilise 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);
}
 

Maintenant que l'implémentation et l'appel des fonctions de base sont terminés, le processus du début à la fin est assez fastidieux. Chaque méthode est implémentée étape par étape, sans référencer d'autres bibliothèques, et la compatibilité de chaque navigateur doit être prise en considération. .

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.