原生js编写autoComplete插件
更新时间:2016年4月16日 10:00 点击:2529
最近有提关于下拉选项过多的时候,希望输入关键词,可以搜索内容的需求,但是之前项目太赶,所以也就没有来得及做,因为希望用原生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程序设计有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29