最近有提關於下拉選項過多的時候，希望輸入關鍵詞，可以搜索內容的需求，但是之前項目太趕，所以也就沒有來得及做，因為希望用原生js寫一些內容，所以插件是採用了原生js寫的思路如下
第一步： fnInit實現初始化一些字段
第二步：加載搜索框的div
第三步：實現search功能，刪除原節點並加載新節點
第四步：點擊或者回車的時候設置value
代碼：
autoComplete.js
/** * @summary AutoComplete * @description 輸入框自動檢索下拉選項* @version 0.0.1 * @file autoComplete.js * @author cangowu * @contact [email protected] * @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程序設計有所幫助。