原生js编写autoComplete插件


Posted in Javascript onApril 13, 2016

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

/** 
 * @summary   AutoComplete 
 * @description 输入框自动检索下拉选项 
 * @version   0.0.1 
 * @file     autoComplete.js 
 * @author   cangowu 
 * @contact   1138806090@qq.com 
 * @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.index = length - 1; 
          } else if (this.index == -1) { 
            this.obj.value = this.sSearchValue; 
          } 
          this.domInput.value = this.domDiv.childNodes[this.index].text; 
          this.fnChangeClass(); 
        } 
        else if (event.keyCode == 13) { 
          this.fnLoadSearchContent(); 
          this.fnShowDiv(); 
          //this.domDiv.style.display = this.domDiv.style.display === 'none' ? 'block' : 'none'; 
          this.index = -1; 
        } else { 
          this.index = -1; 
        } 
      } 
    }, 
    fnLoadSearchContent: function () { 
      //删除所有的子节点 
      while (this.domDiv.hasChildNodes()) { 
        this.domDiv.removeChild(this.domDiv.firstChild); 
      } 
      //设置search的值 
      this.sSearchValue = this.domInput.value; 
      //如果值为空的时候选择退出 
      var sTrimSearchValue = this.sSearchValue.replace(/(^\s*)|(\s*$)/g, ''); 
      if (sTrimSearchValue == "") { 
        this.domDiv.style.display = 'none'; 
        return; 
      } 
      try { 
        var reg = new RegExp("(" + sTrimSearchValue + ")", "i"); 
      } 
      catch (e) { 
        return; 
      } 
      //搜索并增加新节点 
      var nDivIndex = 0; 
      for (var i = 0; i < this.aData.length; i++) { 
        if (reg.test(this.aData[i][this.sTextFiled])) { 
          var domDiv = document.createElement("div"); 
          //div.className="auto_onmouseout"; 
          domDiv.text = this.aData[i][this.sTextFiled]; 
          domDiv.onclick = this.fnSetValue(this); 
          domDiv.onmouseover = this.fnAutoOnMouseOver(this, nDivIndex); 
          domDiv.innerHTML = this.aData[i][this.sTextFiled].replace(reg, "<strong>$1</strong>");//搜索到的字符粗体显示 
          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 < length; j++) { 
        if (j != that.index) { 
          that.domDiv.childNodes[j].style.backgroundColor = ''; 
          that.domDiv.childNodes[j].style.color = '#000'; 
        } else { 
          that.domDiv.childNodes[j].style.backgroundColor = 'blue'; 
          that.domDiv.childNodes[j].style.color = '#fff'; 
        } 
      } 
    }, 
    fnShowDiv: function () { 
      if (this.domDiv.children.length !== 0) { 
        this.domDiv.style.display = this.domDiv.style.display === 'none' ? 'block' : 'none'; 
      } 
    }, 
    util: {//公共接口方法 
      fnInsertAfter: function (ele, targetEle) { 
        var parentnode = targetEle.parentNode || targetEle.parentElement; 
        if (parentnode.lastChild == targetEle) { 
          parentnode.appendChild(ele); 
        } else { 
          parentnode.insertBefore(ele, targetEle.nextSibling); 
        } 
      }, 
      fnAddEvent: 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; 
        } 
      }, 
      fnGet: function (url, 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); 
          } 
        }; 
        xhr.open('get', url, true); 
        xhr.send(); 
      } 
    } 
  } 
 
  window.AutoComplete = function (option) { 
    var aOption = Array.prototype.slice.call(arguments); 
    for(var i=0;i<aOption.length;i++){ 
      var autoComplete = new AutoComplete(); 
      autoComplete.fnInit(aOption[i]); 
      autoComplete.fnRender(); 
    } 
  } 
 
})(window);

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
 
<div> 
<input type="text" id="txtTest"> 
</div> 
<br> 
<div> 
<input type="text" id="txtTest1"> 
</div> 
 
<script src="autoComplete.js"></script> 
<script> 
 
  window.onload = function () { 
    var option = { 
      id: 'txtTest', //控件id 
      data: [{ 
        "id": "1", 
        "name": "aaaaa" 
      }, { 
        "id": "2", 
        "name": "bbbbb" 
      }, { 
        "id": "2", 
        "name": "bbb吴bb" 
      }, { 
        "id": "2", 
        "name": "bbbzbb" 
      }], 
      paraName: 'name', 
      textFiled: 'name', //显示的文字的属性名 
      valueFiled: 'id', //获取value的属性名 
      select: function (val, text) { 
        alert(val + '' + text); 
      } //选择选项时触发的事件 
    }; 
    var option1 = { 
      id: 'txtTest1', //控件id 
      url: 'data.json', //数据 
      paraName: 'name', 
      textFiled: 'name', //显示的文字的属性名 
      valueFiled: 'id', //获取value的属性名 
      select: function (val, text) { 
        alert(val + '' + text); 
      } //选择选项时触发的事件 
    }; 
    AutoComplete(option,option1); 
 
  } 
 
</script> 
</body> 
</html>

data.json

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

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

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
详解AngularJS 模块化
Jun 14 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
vue实现购物车结算功能
Jun 18 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
JS中的eval 为什么加括号
Apr 13 #Javascript
jQuery操作属性和样式详解
Apr 13 #Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 #Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 #Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 #Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 #Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 #Javascript
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
python url 参数修改方法
2018/12/26 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
好习惯伴我成长演讲稿
2014/05/21 职场文书
售后客服工作职责
2014/06/16 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
品质保证书格式
2015/02/28 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书