原生js编写autoComplete插件_javascript技巧

最近有提关于下拉选项过多的时候，希望输入关键词，可以搜索内容的需求，但是之前项目太赶，所以也就没有来得及做，因为希望用原生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程序设计有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
AutoComplete插件
原生javascript、javascript 原生ajax、javascript原生代码、原生javascript插件、原生javascript做动画，以便于您获取更多的相关知识。

时间： 2024-08-01 17:46:17

原生js编写autoComplete插件_javascript技巧的相关文章

原生js实现autocomplete插件_javascript技巧

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

瀑布流的实现方式（原生js+jquery+css3）_javascript技巧

前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的...  原生javascript版  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <

原生js实现模拟滚动条_javascript技巧

当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

常用原生js自定义函数总结_javascript技巧

js获取日期函数 //获取当前时间日期 function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var clock = year + "-&quo

基于原生JS实现图片裁剪_javascript技巧

下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1.利用HTML5新增拖拽事件drag drop等 2.传统方法,利用鼠标事件,mousedown.mousemove等 在这里,我们采用方法2. 裁剪区域的形成 要进行裁剪首先要形成裁剪区域,这个裁剪区域的形成我们可以与鼠标移动的距离相关联.鼠标移动多远,裁剪区域就有多大.如下图: 如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高.

常用原生JS兼容性写法汇总_javascript技巧

就来总结一下简单的东西 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 ele

自己封装的一个原生JS拖动方法(推荐)_javascript技巧

代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素 function getPos(t){ var offsetLeft = 0, offsetTop = 0, offsetParent = t; while(offsetParent){ offsetL

原生JS实现LOADING效果_javascript技巧

纯文本loading效果,可以自己定义颜色和速度 复制代码 代码如下: /** Loading animation  *  Created by 黑と白の印記 on 15/03/11.  */   function loading(element,lightColor,darkColor,speed,callback){     if(!element&&(!element.innerText||!element.textContent))return     element = type

最好用的省市二级联动 原生js实现你值得拥有_javascript技巧

复制代码 代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new A