기본 js는 자동 완성 플러그인_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

실제 프로젝트에서는 관련 기능을 구현하기 위해 다른 사람이 작성한 플러그인을 사용하는 것이 가장 좋습니다. 일부 프로젝트는 더 시급하고 직접 작성할 시간이 충분하지 않기 때문입니다. 작성하더라도 호환성을 디버깅하는 데 많은 시간을 소비합니다. 그러나 학습 목적을 위해 자유 시간을 활용하여 스스로 글을 쓰고, 기본 js 항목을 읽고, 자신의 아이디어에 따라 플러그인을 만들어 레벨을 향상시킬 수 있습니다.
autotemplete에 대해 말하자면, 많은 사람들이 autotemplete.js를 인용하면 Baidu 검색창의 프롬프트 기능과 유사하게 입력 상자에 값을 입력할 때 드롭다운 옵션을 표시할 수 있습니다.
입력 상자에 입력 이벤트 추가
1. 입력 이벤트 호환 코드는 다음과 같습니다.

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

로그인 후 복사

입력 이벤트는 다른 이벤트와 다릅니다. IE 하위 버전은 입력 이벤트를 지원하지 않으며, IE 상위 버전과 w3c 표준 브라우저에서는 입력 이벤트만 지원합니다.
2. 입력 이벤트가 발생하면 데이터를 가져옵니다
여기에는 두 가지 형태의 데이터가 있는데, 하나는 직접 설정된 객체 배열이고, 다른 하나는 ajax 요청에 의해 반환된 데이터입니다
이때 Ajax 요청 기능이 필요합니다. 여기에 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 += "&#63;";
        for (var prop in paraobj) {
          parastr += prop + "=" + paraobj[prop] + "&";
        }
         xhr.open('get', parastr != "&#63;" &#63; (url + parastr) : url, true);
         xhr.send();
 
      }

로그인 후 복사

3. Ajax 요청이 성공하고 데이터가 있으면 드롭다운 상자를 만들고 드롭다운 상자에 옵션을 추가합니다. ////드롭다운 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'
      };<br>     
      for (var prop in style) {
        div.style[prop] = style[prop];
      }
      this.showdiv = 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);
      });
    }

로그인 후 복사

위의 주요 단계는 이제 이러한 코드를 객체에 캡슐화하고 플러그인으로 만드는 방법을 살펴보겠습니다. 현재 우리는 익명 폐쇄를 사용하고 있습니다:

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

로그인 후 복사

본체 코드가 추가되었습니다. 구체적인 구현 코드를 보여드리겠습니다.

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

로그인 후 복사

사용된 코드는 다음과 같습니다

호출 호출

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

로그인 후 복사

백그라운드 코드는 다음과 같습니다. 여기서는 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);
}

로그인 후 복사

이제 기본 기능 구현과 호출이 끝났으니 처음부터 끝까지의 과정이 꽤 번거롭습니다. 각 메서드는 다른 라이브러리를 참조하지 않고 단계별로 구현되며 각 브라우저의 호환성을 고려해야 합니다. .

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.