原生js实现autocomplete插件


Posted in Javascript onApril 14, 2016

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

AddEvt: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;
      }
    }

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

get: function(url, paraobj, fn, timeout) {
        var xhr = null;
        try {
 
         ////兼容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();
 
      }

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

createShowDiv: function() {
 
      ///如果下拉div已存在,删除掉
      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;
    }

追加选项代码:

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', obj[self.config.valueFiled]);
        child.innerHTML = obj[self.config.textFiled];
        fragment.appendChild(child);
      }
      self.showdiv.appendChild(fragment);
      self.util.insertAfter(self.showdiv, self.autoElement);
 
      //为下拉框添加点击事件
      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);
      });
    }

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

(function(win) {
  var autocomplete= function() {
    this.Init.apply(this, arguments);
 
  }
 
  autocomplete.prototype = {
 
    ////添加相关操作代码
 
    Init: {}, ///初始化参数
 
    Render: {},
 
    createShowDiv: {}, ///创建下拉div
 
    appendChild: {}, ///在下拉div里面追加显示项
 
    closeDiv: {}, ////关闭下拉框
 
    //////工具对象,事件,请求,还有dom节点操作的函数
 
    util: {
 
      AddEvt: {}, ///添加事件
 
      insertAfter: {}, ///在某元素后面追加元素
 
        get: {} //// Ajax get请求
 
    }
 
  }
 
  win.Autocomplete= function(paraobj) {
    new autocomplete(paraobj).Render();
  }
})(window)

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

(function(win) {
  var autocomplete = function () {
    this.Init.apply(this, arguments);
  }
  autocomplete.prototype = {
    Init: function() {
      var args = Array.prototype.slice.call(arguments);
      if (args && args.length > 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, paraobj, 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已存在,删除掉
      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'
      };
      for (var prop in style) {
        div.style[prop] = style[prop];
      }
      this.showdiv = div;
    },
    ///在下拉div里面追加显示项
    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', obj[self.config.valueFiled]);
        child.innerHTML = obj[self.config.textFiled];
        fragment.appendChild(child);
      }
      self.showdiv.appendChild(fragment);
      self.util.insertAfter(self.showdiv, self.autoElement);
 
      //为下拉框添加点击事件
      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);
      });
    },
    ////关闭下拉框
    closeDiv: function () {
      if (this.showdiv) {
        this.showdiv.style.display = 'none';
      }
 
    }
    ,
    util: {
      ///添加事件
      AddEvt: 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;
        }
      },
      ///在某元素后面追加元素
      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, paraobj, 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);
          }
        };
        var parastr = '';
        parastr += "?";
        for (var prop in paraobj) {
          parastr += prop + "=" + paraobj[prop] + "&";
        }
         xhr.open('get', parastr != "?" ? (url + parastr) : url, true);
         xhr.send();
 
      }
    }
  }
 
  win.AutoComplete = function (paraobj) {
    new autocomplete(paraobj).Render();
 
  }
 
})(window)

下面是使用的代码

页面调用

window.onload = function () {
  AutoComplete({
    id: 'txtTest', //控件id
    url: '/Home/Test4', //数据
    paraName:'name',
    textFiled: 'name', //显示的文字的属性名
    valueFiled: 'id', //获取value的属性名
    //         style: {}, //显示的下拉div的样式设置
    //           url: '', //ajax请求的url
    select: function (val, text) {
      alert(val + '---' + text);
    }, //选择选项时触发的事件,
    showdivId: 'showDIv' //下拉选择区域的id});
  });
 
}

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

public JsonResult Test4(string  name)
{
  var list=new List<Student>();
  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);
}

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

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

Javascript 相关文章推荐
我的Node.js学习之路(一)
Jul 06 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 #Javascript
基于jQuery实现音乐播放试听列表
Apr 14 #Javascript
js仿3366小游戏选字游戏
Apr 14 #Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 #Javascript
Node.js实现数据推送
Apr 14 #Javascript
node.js实现端口转发
Apr 14 #Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
javascript常用对话框小集
2013/09/13 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python批量图片处理简单示例
2019/08/06 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
写给保洁员表扬信
2014/01/08 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2016国培研修心得体会
2016/01/08 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python