第一步：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, $1);//搜索到的字符粗体显示 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
title
data.json
[ { id: 1, name: aaaaa }, { id: 2, name: bbbbb }, { id: 3, name: ccccc } ]
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。