原生js编写autoComplete插件_javascript技巧

最近有提关于下拉选项过多的时候，希望输入关键词，可以搜索内容的需求，但是之前项目太赶，所以也就没有来得及做，因为希望用原生js写一些内容，所以插件是采用了原生js写的思路如下
第一步：fnInit实现初始化一些字段
第二步：加载搜索框的div
第三步：实现search功能，删除原节点并加载新节点
第四步：点击或者回车的时候设置value
代码：
autoComplete.js

/** 
 * @summary   AutoComplete 
 * @description 输入框自动检索下拉选项 
 * @version   0.0.1 
 * @file     autoComplete.js 
 * @author   cangowu 
 * @contact   [e-mail] 
 * @copyright  Copyright 2016 cangoWu. 
 * 
 * 这是一个基于原生js的自动完成搜索的下拉输入框， 
 * 可以通过移动鼠标上下键回车以及直接用鼠标点击 
 * 选中搜索的选项，在一些关键的地方都有注释 
 * 
 * 实例参见: 
 * CSDN博客：http://blog.csdn.net/wzgdjm/article/details/51122615 
 * Github：https://github.com/cangowu/autoComplete 
 * 
 */ 
(function () { 
 
  function AutoComplete() { 
    if (!(this instanceof AutoComplete)) { 
      return new AutoComplete(); 
    } 
    this.sSearchValue = ''; 
    this.index = -1; 
  } 
 
  AutoComplete.prototype = { 
    fnInit: function (option) {//初始化基本信息 
      var oDefault = { 
        id: '', //控件id 
        data: [], //数据 
        paraName: '', 
        textFiled: '', //显示的文字的属性名 
        valueFiled: '', //获取value的属性名 
        style: {}, //显示的下拉div的样式设置 
        url: '', //ajax请求的url 
        select: function () { 
        }, //选择选项时触发的事件 
      }; 
      var _option = option; 
 
      this.sId = _option.id || oDefault.id; 
      this.aData = _option.data || oDefault.data; 
      this.paraName = _option.paraName || oDefault.paraName; 
      this.sTextFiled = _option.textFiled || oDefault.textFiled; 
      this.sValueFiled = _option.valueFiled || oDefault.valueFiled; 
      this.style = _option.style || oDefault.style; 
      this.sUrl = _option.url || oDefault.url; 
      this.fnSelect = _option.select || oDefault.select; 
      this.sDivId = this.sId + new Date().getTime();//加载选项额divid 
 
      //判断如果传入了url,没有传入data数据，就ajax获取数据，否则使用data取数据 
      if (this.sUrl !== '' && this.aData.length === 0) { 
        var that = this; 
        this.util.fnGet(this.sUrl, function (data) { 
          console.log(eval(data)); 
          that.aData = eval(data); 
        }, 10); 
      } 
 
      //给aData排序 
      var sTextField = this.sTextFiled; 
      this.aData.sort(function (a, b) { 
        return a[sTextField] > b[sTextField]; 
      }); 
      //获取控件 
      this.domInput = document.getElementById(this.sId); 
      //this.domDiv = document.getElementById(this.sDivId); 
    }, 
    fnRender: function () {//渲染一些必须的节点 
      var that = this; 
      //生成一个对应的div，承载后面的一些选项的 
      if (that.sDivId) { 
        var domDiv = document.createElement('div'); 
        domDiv.id = that.sDivId; 
        domDiv.style.background = '#fff'; 
        domDiv.style.width = that.domInput.offsetWidth - 2 + 'px'; 
        domDiv.style.position = 'absolute'; 
        domDiv.style.border = '1px solid #a9a9a9'; 
        domDiv.style.display = 'none'; 
        that.util.fnInsertAfter(domDiv, that.domInput); 
 
        //加载之后才能将domDiv赋值为 
        this.domDiv = document.getElementById(this.sDivId); 
      } 
      //给input添加keyup事件 
      that.util.fnAddEvent(that.domInput, 'keyup', function (event) { 
        that.fnSearch(event); 
      }); 
    }, 
    fnSearch: function (event) { 
      //判断如果不是回车键，上键下键的时候执行搜索 
      if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) { 
        this.fnLoadSearchContent(); 
        this.fnShowDiv(); 
      } else {//搜索之后监测键盘事件 
        var length = this.domDiv.children.length; 
        if (event.keyCode == 40) { 
          ++this.index; 
          if (this.index >= length) { 
            this.index = 0; 
          } else if (this.index == length) { 
            this.domInput.value = this.sSearchValue; 
          } 
          this.domInput.value = this.domDiv.childNodes[this.index].text; 
          this.fnChangeClass(); 
        } 
        else if (event.keyCode == 38) { 
          this.index--; 
          if (this.index $1");//搜索到的字符粗体显示 
          this.domDiv.appendChild(domDiv); 
          nDivIndex++; 
        } 
      } 
    }, 
    fnSetValue: function (that) { 
      return function () { 
        that.domInput.value = this.text; 
        that.domDiv.style.display = 'none'; 
      } 
    }, 
    fnAutoOnMouseOver: function (that, idx) { 
      return function () { 
        that.index = idx; 
        that.fnChangeClass(); 
      } 
    }, 
    fnChangeClass: function () { 
      var that = this; 
      var length = that.domDiv.children.length; 
      for (var j = 0; j 

index.html

data.json

[ 
 { 
  "id": "1", 
  "name": "aaaaa" 
 }, 
 { 
  "id": "2", 
  "name": "bbbbb" 
 }, 
 { 
  "id": "3", 
  "name": "ccccc" 
 } 
] 

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