Native js melaksanakan kemahiran plug-in_javascript autolengkap

Dalam projek sebenar, sebaiknya gunakan pemalam yang ditulis oleh orang lain untuk melaksanakan fungsi berkaitan Bagi menjimatkan masa dan kos, kerana sesetengah projek lebih mendesak dan tidak cukup masa untuk anda menulisnya sendiri. Walaupun anda menulisnya, anda Juga menghabiskan banyak masa menyahpepijat keserasian. Tetapi untuk tujuan pembelajaran, anda boleh menggunakan masa lapang anda untuk menulis sendiri, membaca beberapa perkara js asli dan membuat pemalam mengikut idea anda sendiri, yang boleh meningkatkan tahap anda.
Bercakap tentang autotemplete, ramai orang telah menggunakannya Dengan memetik autotemplete.js, anda boleh menggesa pilihan lungsur turun apabila memasukkan nilai dalam kotak input, sama seperti fungsi gesaan kotak carian Baidu.
Tambahkan acara input pada kotak input
1.Kod keserasian acara input adalah seperti berikut:

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;
      }
    }

Peristiwa input berbeza daripada acara lain versi IE yang lebih rendah tidak menyokong acara input dan hanya boleh menggunakan peristiwa penukaran harta versi lebih tinggi dan penyemak imbas standard w3c menyokong acara input 2. Dapatkan data apabila peristiwa input dicetuskan
Terdapat dua bentuk data di sini, satu ialah susunan objek yang ditetapkan secara langsung, dan satu lagi ialah data yang dikembalikan oleh permintaan ajax
Pada masa ini kita memerlukan fungsi permintaan ajax, berikut adalah permintaan dapatkan

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. Permintaan ajax berjaya dan apabila terdapat data, buat kotak lungsur dan tambahkan pilihan pada kotak lungsur ////Buat Div lungsur

Buat kod kotak lungsur:

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;
    }

Tambahkan kod pilihan:

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);
      });
    }
 

Di atas ialah langkah utama Sekarang mari kita lihat cara merangkum kod ini ke dalam objek dan menjadikannya pemalam. Pada masa ini kami menggunakan penutupan tanpa nama:

(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)

Kod badan utama telah ditambahkan, mari tunjukkan kod pelaksanaan khusus:

(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)

Berikut ialah kod yang digunakan

Panggilan halaman

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});
  });
 
}

Kod latar belakang adalah seperti berikut, di sini saya menggunakan 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);
}
 

Kini setelah pelaksanaan fungsi asas dan panggilan selesai, proses dari awal hingga akhir agak menyusahkan Setiap kaedah dilaksanakan langkah demi langkah, tanpa merujuk perpustakaan lain, dan keserasian setiap pelayar mesti diambil kira. .

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.