UDN-企业互联网技术人气社区

板块导航

浏览  : 451
回复  : 5

[原生js] 原生js编写autoComplete插件

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 15:51:32 | 显示全部楼层 |阅读模式
  这篇文章主要为大家详细介绍了原生js编写的autoComplete插件,感兴趣的小伙伴们可以参考一下

  最近有提关于下拉选项过多的时候,希望输入关键词,可以搜索内容的需求,但是之前项目太赶,所以也就没有来得及做,因为希望用原生js写一些内容,所以插件是采用了原生js写的思路如下
  
  第一步:fnInit实现初始化一些字段
  
  第二步:加载搜索框的div
  
  第三步:实现search功能,删除原节点并加载新节点
  
  第四步:点击或者回车的时候设置value
  
  代码:
  1. /**
  2. * @summary   AutoComplete
  3. * @description 输入框自动检索下拉选项
  4. * @version   0.0.1
  5. * @file     autoComplete.js
  6. * @author   cangowu
  7. * @contact   1138806090@qq.com
  8. * @copyright  Copyright 2016 cangoWu.
  9. *
  10. * 这是一个基于原生js的自动完成搜索的下拉输入框,
  11. * 可以通过移动鼠标上下键回车以及直接用鼠标点击
  12. * 选中搜索的选项,在一些关键的地方都有注释
  13. *
  14. * 实例参见:
  15. * CSDN博客:http://blog.csdn.net/wzgdjm/article/details/51122615
  16. * Github:https://github.com/cangowu/autoComplete
  17. *
  18. */
  19. (function () {

  20.   function AutoComplete() {
  21.     if (!(this instanceof AutoComplete)) {
  22.       return new AutoComplete();
  23.     }
  24.     this.sSearchValue = '';
  25.     this.index = -1;
  26.   }

  27.   AutoComplete.prototype = {
  28.     fnInit: function (option) {//初始化基本信息
  29.       var oDefault = {
  30.         id: '', //控件id
  31.         data: [], //数据
  32.         paraName: '',
  33.         textFiled: '', //显示的文字的属性名
  34.         valueFiled: '', //获取value的属性名
  35.         style: {}, //显示的下拉div的样式设置
  36.         url: '', //ajax请求的url
  37.         select: function () {
  38.         }, //选择选项时触发的事件
  39.       };
  40.       var _option = option;

  41.       this.sId = _option.id || oDefault.id;
  42.       this.aData = _option.data || oDefault.data;
  43.       this.paraName = _option.paraName || oDefault.paraName;
  44.       this.sTextFiled = _option.textFiled || oDefault.textFiled;
  45.       this.sValueFiled = _option.valueFiled || oDefault.valueFiled;
  46.       this.style = _option.style || oDefault.style;
  47.       this.sUrl = _option.url || oDefault.url;
  48.       this.fnSelect = _option.select || oDefault.select;
  49.       this.sDivId = this.sId + new Date().getTime();//加载选项额divid

  50.       //判断如果传入了url,没有传入data数据,就ajax获取数据,否则使用data取数据
  51.       if (this.sUrl !== '' && this.aData.length === 0) {
  52.         var that = this;
  53.         this.util.fnGet(this.sUrl, function (data) {
  54.           console.log(eval(data));
  55.           that.aData = eval(data);
  56.         }, 10);
  57.       }

  58.       //给aData排序
  59.       var sTextField = this.sTextFiled;
  60.       this.aData.sort(function (a, b) {
  61.         return a[sTextField] > b[sTextField];
  62.       });
  63.       //获取控件
  64.       this.domInput = document.getElementById(this.sId);
  65.       //this.domDiv = document.getElementById(this.sDivId);
  66.     },
  67.     fnRender: function () {//渲染一些必须的节点
  68.       var that = this;
  69.       //生成一个对应的div,承载后面的一些选项的
  70.       if (that.sDivId) {
  71.         var domDiv = document.createElement('div');
  72.         domDiv.id = that.sDivId;
  73.         domDiv.style.background = '#fff';
  74.         domDiv.style.width = that.domInput.offsetWidth - 2 + 'px';
  75.         domDiv.style.position = 'absolute';
  76.         domDiv.style.border = '1px solid #a9a9a9';
  77.         domDiv.style.display = 'none';
  78.         that.util.fnInsertAfter(domDiv, that.domInput);

  79.         //加载之后才能将domDiv赋值为
  80.         this.domDiv = document.getElementById(this.sDivId);
  81.       }
  82.       //给input添加keyup事件
  83.       that.util.fnAddEvent(that.domInput, 'keyup', function (event) {
  84.         that.fnSearch(event);
  85.       });
  86.     },
  87.     fnSearch: function (event) {
  88.       //判断如果不是回车键,上键下键的时候执行搜索
  89.       if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {
  90.         this.fnLoadSearchContent();
  91.         this.fnShowDiv();
  92.       } else {//搜索之后监测键盘事件
  93.         var length = this.domDiv.children.length;
  94.         if (event.keyCode == 40) {
  95.           ++this.index;
  96.           if (this.index >= length) {
  97.             this.index = 0;
  98.           } else if (this.index == length) {
  99.             this.domInput.value = this.sSearchValue;
  100.           }
  101.           this.domInput.value = this.domDiv.childNodes[this.index].text;
  102.           this.fnChangeClass();
  103.         }
  104.         else if (event.keyCode == 38) {
  105.           this.index--;
  106.           if (this.index <= -1) {
  107.             this.index = length - 1;
  108.           } else if (this.index == -1) {
  109.             this.obj.value = this.sSearchValue;
  110.           }
  111.           this.domInput.value = this.domDiv.childNodes[this.index].text;
  112.           this.fnChangeClass();
  113.         }
  114.         else if (event.keyCode == 13) {
  115.           this.fnLoadSearchContent();
  116.           this.fnShowDiv();
  117.           //this.domDiv.style.display = this.domDiv.style.display === 'none' ? 'block' : 'none';
  118.           this.index = -1;
  119.         } else {
  120.           this.index = -1;
  121.         }
  122.       }
  123.     },
  124.     fnLoadSearchContent: function () {
  125.       //删除所有的子节点
  126.       while (this.domDiv.hasChildNodes()) {
  127.         this.domDiv.removeChild(this.domDiv.firstChild);
  128.       }
  129.       //设置search的值
  130.       this.sSearchValue = this.domInput.value;
  131.       //如果值为空的时候选择退出
  132.       var sTrimSearchValue = this.sSearchValue.replace(/(^\s*)|(\s*$)/g, '');
  133.       if (sTrimSearchValue == "") {
  134.         this.domDiv.style.display = 'none';
  135.         return;
  136.       }
  137.       try {
  138.         var reg = new RegExp("(" + sTrimSearchValue + ")", "i");
  139.       }
  140.       catch (e) {
  141.         return;
  142.       }
  143.       //搜索并增加新节点
  144.       var nDivIndex = 0;
  145.       for (var i = 0; i < this.aData.length; i++) {
  146.         if (reg.test(this.aData[i][this.sTextFiled])) {
  147.           var domDiv = document.createElement("div");
  148.           //div.className="auto_onmouseout";
  149.           domDiv.text = this.aData[i][this.sTextFiled];
  150.           domDiv.onclick = this.fnSetValue(this);
  151.           domDiv.onmouseover = this.fnAutoOnMouseOver(this, nDivIndex);
  152.           domDiv.innerHTML = this.aData[i][this.sTextFiled].replace(reg, "<strong>$1</strong>");//搜索到的字符粗体显示
  153.           this.domDiv.appendChild(domDiv);
  154.           nDivIndex++;
  155.         }
  156.       }
  157.     },
  158.     fnSetValue: function (that) {
  159.       return function () {
  160.         that.domInput.value = this.text;
  161.         that.domDiv.style.display = 'none';
  162.       }
  163.     },
  164.     fnAutoOnMouseOver: function (that, idx) {
  165.       return function () {
  166.         that.index = idx;
  167.         that.fnChangeClass();
  168.       }
  169.     },
  170.     fnChangeClass: function () {
  171.       var that = this;
  172.       var length = that.domDiv.children.length;
  173.       for (var j = 0; j < length; j++) {
  174.         if (j != that.index) {
  175.           that.domDiv.childNodes[j].style.backgroundColor = '';
  176.           that.domDiv.childNodes[j].style.color = '#000';
  177.         } else {
  178.           that.domDiv.childNodes[j].style.backgroundColor = 'blue';
  179.           that.domDiv.childNodes[j].style.color = '#fff';
  180.         }
  181.       }
  182.     },
  183.     fnShowDiv: function () {
  184.       if (this.domDiv.children.length !== 0) {
  185.         this.domDiv.style.display = this.domDiv.style.display === 'none' ? 'block' : 'none';
  186.       }
  187.     },
  188.     util: {//公共接口方法
  189.       fnInsertAfter: function (ele, targetEle) {
  190.         var parentnode = targetEle.parentNode || targetEle.parentElement;
  191.         if (parentnode.lastChild == targetEle) {
  192.           parentnode.appendChild(ele);
  193.         } else {
  194.           parentnode.insertBefore(ele, targetEle.nextSibling);
  195.         }
  196.       },
  197.       fnAddEvent: function (ele, evt, fn) {
  198.         if (document.addEventListener) {
  199.           ele.addEventListener(evt, fn, false);
  200.         } else if (document.attachEvent) {
  201.           ele.attachEvent('on' + (evt == "input" ? "propertychange" : evt), fn);
  202.         } else {
  203.           ele['on' + (evt == "input" ? "propertychange" : evt)] = fn;
  204.         }
  205.       },
  206.       fnGet: function (url, fn, timeout) {
  207.         var xhr = null;
  208.         try {
  209.           if (window.XMLHttpRequest) {
  210.             xhr = new XMLHttpRequest();
  211.           } else if (Window.ActiveXObject) {

  212.             xhr = new ActiveXObject("Msxml2.Xmlhttp");
  213.           }
  214.         } catch (e) {
  215.           //TODO handle the exception
  216.           xhr = new ActiveXObject('Microsoft.Xmlhttp');
  217.         }
  218.         xhr.onreadystatechange = function () {
  219.           if (this.readyState == 4 && this.status == 200) {
  220.             fn.call(this, this.responseText);
  221.           } else {
  222.             setTimeout(function () {
  223.               xhr.abort();
  224.             }, timeout);
  225.           }
  226.         };
  227.         xhr.open('get', url, true);
  228.         xhr.send();
  229.       }
  230.     }
  231.   }

  232.   window.AutoComplete = function (option) {
  233.     var aOption = Array.prototype.slice.call(arguments);
  234.     for(var i=0;i<aOption.length;i++){
  235.       var autoComplete = new AutoComplete();
  236.       autoComplete.fnInit(aOption[i]);
  237.       autoComplete.fnRender();
  238.     }
  239.   }

  240. })(window);
复制代码

       index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>

  8. <div>
  9. <input type="text" id="txtTest">
  10. </div>
  11. <br>
  12. <div>
  13. <input type="text" id="txtTest1">
  14. </div>

  15. <script src="autoComplete.js"></script>
  16. <script>

  17.   window.onload = function () {
  18.     var option = {
  19.       id: 'txtTest', //控件id
  20.       data: [{
  21.         "id": "1",
  22.         "name": "aaaaa"
  23.       }, {
  24.         "id": "2",
  25.         "name": "bbbbb"
  26.       }, {
  27.         "id": "2",
  28.         "name": "bbb吴bb"
  29.       }, {
  30.         "id": "2",
  31.         "name": "bbbzbb"
  32.       }],
  33.       paraName: 'name',
  34.       textFiled: 'name', //显示的文字的属性名
  35.       valueFiled: 'id', //获取value的属性名
  36.       select: function (val, text) {
  37.         alert(val + '' + text);
  38.       } //选择选项时触发的事件
  39.     };
  40.     var option1 = {
  41.       id: 'txtTest1', //控件id
  42.       url: 'data.json', //数据
  43.       paraName: 'name',
  44.       textFiled: 'name', //显示的文字的属性名
  45.       valueFiled: 'id', //获取value的属性名
  46.       select: function (val, text) {
  47.         alert(val + '' + text);
  48.       } //选择选项时触发的事件
  49.     };
  50.     AutoComplete(option,option1);

  51.   }

  52. </script>
  53. </body>
  54. </html>

  55. data.json


  56. [
  57. {
  58.   "id": "1",
  59.   "name": "aaaaa"
  60. },
  61. {
  62.   "id": "2",
  63.   "name": "bbbbb"
  64. },
  65. {
  66.   "id": "3",
  67.   "name": "ccccc"
  68. }
  69. ]
复制代码

  以上就是本文的全部内容,希望对大家学习JavaScript程序设计有所帮助。
发表于 2017-1-10 15:52:02 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

发表于 2017-1-10 15:52:03 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2017-1-10 15:52:04 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部