原生js实现autocomplete插件

在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生js的东西，根据自己的思路做插件，这样能提高水平。说到autotemplete，好多人都用过，引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项，类似于百度搜索框那种提示功能，下面就来说说自己的思路。为输入框添加input事件 1.input事件兼容性代码如下：

input事件和其他的事件不一样，低版本的ie不支持input事件，只能用propertychange事件，高版本的ie和w3c标准浏览器支持input事件 2.输入事件触发的时候获取数据这里数据有两种形式，一种是直接设置的对象数组，一种是ajax请求返回数据这时候我们需要一个ajax请求函数，这里写了一个get请求

     ////兼容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();

  }</pre>

3. ajax请求成功，且有数据的时候创建下拉框并在下拉框中追加选项 ////创建下拉Div 创建下拉框代码：

  ///如果下拉div已存在，<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>掉
  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;
}

追加选项代码：

  //为下拉框<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>点击事件
  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);
  });
}

上面说的是主要的几步思路，现在看一下怎么将这些代码封装到一个对象中，让它成为插件。这时候我们用到匿名闭包：

}

autocomplete.prototype = {

////<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>相关操作<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>

Init: {},///初始化参数

Render: {},createShowDiv： {},///创建下拉div

appendChild: {},///在下拉div里面追加<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>项

closeDiv: {},////<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>下拉框

//////工具对象，事件，请求，还有dom节点操作的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>

util: {

  AddEvt： {},///<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>事件

  insertAfter: {},///在某元素后面追加元素

    get: {} //// Ajax get请求

}

}

win.Autocomplete= function(paraobj) {
new autocomplete(paraobj).Render();
}
})(window)

主体的代码添加好了，我们把具体的实现代码展示出来：

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,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已存在，<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>掉
  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',display: 'block'
  };
  for (var prop in style) {
    div.style[prop] = style[prop];
  }
  this.showdiv = div;
},///在下拉div里面追加<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>项
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',val);
  });
},////<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>下拉框
closeDiv: function () {
  if (this.showdiv) {
    this.showdiv.style.display = 'none';
  }

},util: {
  ///<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>事件
  AddEvt: function(ele,fn) {
    if (document.addEventListener) {
      ele.addEventListener(evt,false);
    } else if (document.attachEvent) {
      ele.attachEvent('on' + (evt == "input" ? "propertychange" : evt),fn);
    } else {
      ele['on' + (evt == "input" ? "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,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,true);
     xhr.send();

  }
}

}

win.AutoComplete = function (paraobj) {
new autocomplete(paraobj).Render();

}

})(window)

下面是使用的代码

页面调用

显示的文字的属性名 valueFiled: 'id',//获取value的属性名 // style: {},//显示的下拉div的样式设置 // url: '',//ajax请求的url select: function (val,text) { alert(val + '---' + text); },showdivId: 'showDIv' //下拉选择区域的id}); });

}

后台代码如下，这里我用的是mvc

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

现在基本的功能实现和调用讲完了，从开始到最后的过程是比较麻烦的，每个方法都是一步步实现，没有引用其他的库，要考虑到各个浏览器的兼容性。

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文链接：https://www.f2er.com/js/49313.html

原生js实现autocomplete插件

猜你在找的JavaScript相关文章