您當(dāng)前位置：首頁 > web前端 > 特效 > JavaScript實現(xiàn)下拉框自動提示效果

JavaScript實現(xiàn)下拉框自動提示效果

來源：程序員人生發(fā)布時間：2014-06-05 12:39:44 閱讀次數(shù)：3990次

　　Javascript 實現(xiàn)的自動提示下拉框，作者給他命名為：Auto_Suggest_DropDownControl，下邊是引用作者的原文：

　　剛做BS開發(fā)沒多久，之前一直是做CS開發(fā)，接觸的比較多的是后臺及數(shù)據(jù)庫。一開始接觸一些HTML+CSS+JavaScript稍顯吃力，最近公司需要一個自動提示下拉控件的需求，主要是用于選擇客戶，可以輸入簡拼進(jìn)行搜索。所以開始在腦子里構(gòu)思整個控件的流程，然后結(jié)合MSDN文檔，慢慢的做出了個雛形，覺得還不錯，想寫一篇博文將其記錄下來。

　　控件功能

　　用戶輸入值，該值去匹配項的簡拼或者項的顯示值，彈出相應(yīng)的匹配項，鼠標(biāo)點擊某項或者鍵盤上下鍵進(jìn)行選取后回車得到某項值。

　　……詳細(xì)閱讀：原文

　　實例演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>JS實現(xiàn)文本框下拉自動提示——最火軟件站【wfuyu.com】</title><style type="text/css">.Control_Div{width: 400px;height: 200px;top:100px;left:100px;background-color:snow;position:absolute;}.DropDown_HostDiv{position:relative;float:left;width: 120px;height: 26px;}.DropDown_TextBox{position: relative;width: 100px;height: 16px;}.DropDown_Container{position: relative;top: 2px;width: 100%;height: 190px;overflow: auto;overflow-x: hidden;border: 1px solid Gray;}.DropDown_Container table{width: 340px;height:auto;border-collapse: collapse;}.DropDown_Container table tr{width: auto;padding-top: 1px;height: 15px;font-size: 13px;border-bottom: 1px solid gray;background-color:#F7F4FD;cursor: pointer;}.DropDown_Container table tr:hover{background-color: LightBlue;}.DropDown_Container table tr td{font-family: Verdana;border-bottom: 1px solid gray;}</style><script language="javascript" type="text/javascript">(function () {window.HXZ;if (!window.HXZ) {window.HXZ = {}};HXZ.DropDown = function (txtObj, _ContainerStyle) {var _this = this;_this.DataSource;_this.DropDown_TextBox = txtObj;_this.SelectedItem;_this.DropDown_Div;_this.DropDown_Items;_this.DropDown_DefaultSelectedItem;_this.ContainerStyle = _ContainerStyle;_this.DataSourceSetting = { "KeyFieldStr": "KEY", "ValueFieldStr": "VALUE", "PyFieldStr": "PY" };_this.CurrentTimeOutID;//選中某項的時候觸發(fā)的擴(kuò)展方法_this.FireWhenConfrimMethod;_this.IsJudgeDirection = false;_this.DropDown_DivZindex = 30;_this.DropDown_HostDiv = document.body;//初始化指定數(shù)據(jù)域以及數(shù)據(jù)源中鍵值字段字符串和拼音字段字符串_this.Init = function (_DatataSource, _KeyFieldStr, _ValueFileStr, _PyFieldStr) {_this.DataSourceSetting.KeyFieldStr = _KeyFieldStr || "KEY";_this.DataSourceSetting.ValueFieldStr = _ValueFileStr || "VALUE";_this.DataSourceSetting.PyFieldStr = _PyFieldStr || "PY";_this.DataSource = _DatataSource;_this.CreateContainer();_this.InitItems(_this.DropDown_Div, _this.DataSource);_this.InitInputEvent();}_this.CreateContainer = function () {if (_this.DropDown_Div != undefined) {document.body.removeChild(_this.DropDown_Div);}_this.DropDown_Div = document.createElement("div");_this.DropDown_Div.style["zIndex"] = _this.DropDown_DivZindex;HXZ.AddEvent(_this.DropDown_Div, "scroll", function () {if (_this.CurrentTimeOutID != undefined || _this.CurrentTimeOutID != null) {window.clearTimeout(_this.CurrentTimeOutID);_this.DropDown_TextBox.focus();}});HXZ.SetClass(_this.DropDown_Div, _this.ContainerStyle);_this.DropDown_HostDiv.appendChild(_this.DropDown_Div);}_this.InitItems = function (containerDivObj, data) {var table = document.createElement("table");var tbody = document.createElement("tbody");for (var i = 0; i < data.length; i++) {var tr = document.createElement("tr");var td = document.createElement("td");var itemValue = data[i][_this.DataSourceSetting.ValueFieldStr];td.innerHTML = itemValue;tr.setAttribute("ItemKey", data[i][_this.DataSourceSetting.KeyFieldStr]);tr.setAttribute("ItemValue", itemValue);tr.setAttribute("PY", data[i][_this.DataSourceSetting.PyFieldStr]);HXZ.AddEvent(tr, "click", function (event) {_this.DrowDown_Item_Click(event);});tr.style["display"] = "block";tr.appendChild(td);tbody.appendChild(tr);}table.appendChild(tbody);containerDivObj.appendChild(table);_this.DropDown_Items = containerDivObj.getElementsByTagName("tr");_this.DropDown_DefaultSelectedItem = _this.DropDown_Items[0];}_this.InitInputEvent = function () {HXZ.AddEvent(_this.DropDown_TextBox, "click", function (event) {_this.ShowItems(event);});HXZ.AddEvent(_this.DropDown_TextBox, "keyup", function (event) {_this.DropDown_KeyUp(event);});HXZ.AddEvent(_this.DropDown_TextBox, "keydown", function (event) {_this.DropDown_KeyDown(event);});HXZ.AddEvent(_this.DropDown_TextBox, "blur", function (event) {_this.DropDown_TextBox_Blur(event);});}_this.ShowItems = function (event) {_this.DropDown_Div.style["display"] = "block";}_this.DropDown_KeyDown = function (event) {var e = window.event || event;if (_this.DropDown_Div.style["display"] == "none") {_this.DropDown_Div.style["display"] = "block";}var theItem = _this.SelectedItem == undefined || _this.SelectedItem == null ? HXZ.getFirstUnHideChildByTagName(_this.DropDown_Div, "tr") : _this.SelectedItem;switch (e.keyCode) {case 40:if (_this.SelectedItem == undefined || _this.SelectedItem == null) {_this.DrowDown_ItemSelected(theItem);} else {_this.DrowDown_ItemSelected(HXZ.GetNextUnHideSibling(theItem));}break;case 38:_this.DrowDown_ItemSelected(HXZ.GetPreUnHideSibling(theItem));break;case 13:_this.DropDown_Confirm(theItem);break;}}_this.DropDown_KeyUp = function (event) {var items = _this.DropDown_Div.getElementsByTagName("tr");var e = window.event || event;if (e.keyCode == 40 || e.keyCode == 38) {return;}var TextBoxValue = _this.DropDown_TextBox.value.toString().Trim();if (TextBoxValue == "") {for (var i = 0; i < items.length; i++) {items[i].style["display"] = "block";}return;}var regStr = '^' + TextBoxValue + 'w*';var reg = new RegExp(regStr, "g");for (var i = 0, j = items.length; i < j; i++) {var theItem = items[i];var f = reg.test(theItem.getAttribute("PY").toString()) || reg.test(theItem.innerHTML.toString().Trim());var ff = reg.test(theItem.getAttribute("ItemValue").toString().Trim());var IsMatch = f || ff;if (IsMatch) {theItem.style["display"] = "block";}else {theItem.style["display"] = "none";}}if (e.keyCode != 13) {_this.SelectedItem = null;}}_this.DrowDown_ItemSelected = function (itemObj) {if (itemObj == undefined || itemObj == null) {if (_this.DropDown_DefaultSelectedItem != null) {_this.DrowDown_ItemSelected(_this.DropDown_DefaultSelectedItem);}return;}if (_this.SelectedItem != undefined && _this.SelectedItem != null) {_this.SelectedItem.style["backgroundColor"] = "";}_this.SelectedItem = itemObj;_this.SelectedItem.style["backgroundColor"] = "lightBlue";_this.DrowDown_Scroll(_this.SelectedItem);}_this.DrowDown_Scroll = function (itemObj) {var item_height = itemObj.offsetHeight + 10;_this.DropDown_Div.scrollTop = itemObj.offsetTop + item_height - _this.DropDown_Div.offsetHeight >= 0 ? itemObj.offsetTop + item_height - _this.DropDown_Div.offsetHeight : 0;}_this.DropDown_Confirm = function (itemObj) {if (itemObj == undefined || itemObj == null) {_this.SelectedItem = null;return;}_this.DropDown_TextBox.focus();var itemValue = itemObj.getAttribute("ItemValue");var itemKey = itemObj.getAttribute("ItemKey");_this.DropDown_TextBox.value = itemValue;_this.DropDown_TextBox.setAttribute("ItemKey", itemKey);_this.DropDown_TextBox.setAttribute("SelectedValue", itemValue);if (_this.FireWhenConfrimMethod != undefined) {_this.FireWhenConfrimMethod(itemValue, itemKey);}itemObj.style["backgroundColor"] = "";_this.SelectedItem = itemObj;_this.DropDown_Div.style["display"] = "none";}//Downloads By http://www.vxbq.cn_this.DrowDown_Item_Click = function (event) {var t = HXZ.getSrcElement(event);if (t == null) {return;}while (t.tagName != "TR") {t = t.parentNode;}_this.DrowDown_ItemSelected(t);_this.DropDown_Confirm(t);}_this.DropDown_TextBox_Blur = function (event) {_this.CurrentTimeOutID = window.setTimeout(function () { _this.DropDown_Div.style["display"] = "none" }, 160);if (_this.DropDown_TextBox.value.Trim() == "") {_this.SelectedItem = HXZ.getFirstUnHideChildByTagName(_this.DropDown_Div, "div");}//如果用戶更改了輸入框的值的時候，我們自動將其修復(fù)var SelectedValue = _this.DropDown_TextBox.getAttribute("SelectedValue");_this.DropDown_TextBox.value = SelectedValue == null ? "" : SelectedValue;}}HXZ.insertAfter = function (newEl, targetEl) {var parentEl = targetEl.parentNode;if (parentEl.lastChild == targetEl) {parentEl.appendChild(newEl);} else {parentEl.insertBefore(newEl, targetEl.nextSibling);}}HXZ.getSrcElement = function (e) {var ee = e || window.event;if (!document.all) {return ee.target;}return ee.srcElement;}HXZ.AddEvent = function (obj, eve_str, handle) {if (window.attachEvent) {obj.attachEvent("on" + eve_str, handle);}else if (window.addEventListener) {obj.addEventListener(eve_str, handle, true);}}HXZ.RemoveEvent = function (obj, eve_str, handle) {if (window.detachEvent) {obj.detachEvent("on" + eve_str, handle);}else if (window.removeEventListener) {obj.removeEventListener(eve_str, handle, true);}}HXZ.AddEvents = function (obj, eve_array, handle_arr) {for (var i = 0; i < eve_array.length; i++) {HXZ.AddEvent(obj, eve_array[i], handle_arr[i]);}}HXZ.SetClass = function (obj, cssStyle) {obj.setAttribute("class", cssStyle);obj.setAttribute("className", cssStyle);}String.prototype.ToJson = function () {var json;try {json = eval('(' + this + ')');}catch (e) {}return json;};String.prototype.Trim = function () {return this.replace(/(^s*)|(s*$)/g, "");}HXZ.GetNextSibling = function (ele) {if (ele == null) {return ele;}var _ele = ele.nextSibling;if (_ele == null) {return null;}while (_ele.nodeType != 1) {_ele = _ele.nextSibling;}return _ele;}HXZ.GetPreSibling = function (ele) {if (ele == null) {return ele;}var _ele = ele.previousSibling;if (_ele == null) {return null;}while (_ele.nodeType != 1) {_ele = _ele.previousSibling;}return _ele;}HXZ.GetNextUnHideSibling = function (ele) {var _ele = HXZ.GetNextSibling(ele);if (_ele == null) {return null;}while (_ele.style["display"] == "none") {_ele = HXZ.GetNextUnHideSibling(_ele);if (_ele == null) {return null;}}return _ele;}HXZ.GetPreUnHideSibling = function (ele) {var _ele = HXZ.GetPreSibling(ele);if (_ele == null) {return null;}while (_ele.style["display"] == "none") {_ele = HXZ.GetPreUnHideSibling(_ele);if (_ele == null) {return null;}}return _ele;}HXZ.getElementPosition = function (obj) {var obj1 = obj;var position = { "left": obj1.offsetLeft, "top": obj1.offsetTop };while (obj1.offsetParent) {obj1 = obj1.offsetParent;position.left += obj1.offsetLeft;position.top += obj1.offsetTop;}while (obj.parentNode != document.body) {obj = obj.parentNode;position.left -= obj.scrollLeft;position.top -= obj.scrollTop;}return position;}HXZ.getFirstUnHideChildByTagName = function (obj, tagNameStr) {var Childs = obj.getElementsByTagName(tagNameStr);for (var i = 0, j = Childs.length; i < j; i++) {if (Childs[i].style["display"] == "block") {return Childs[i];}}return null;}})();var data = [{ "KEY": "20081714", "VALUE": "周杰倫", "PY": "zjl" },{ "KEY": "20081712", "VALUE": "劉德華", "PY": "ldh" },{ "KEY": "200812313", "VALUE": "梁朝偉", "PY": "lcw" },{ "KEY": "200823713", "VALUE": "章子怡", "PY": "zzy" },{ "KEY": "20231713", "VALUE": "汪涵", "PY": "wh" },{ "KEY": "20231713", "VALUE": "歐弟", "PY": "od" },{ "KEY": "200231713", "VALUE": "錢楓", "PY": "qf" },{ "KEY": "2002313", "VALUE": "田源", "PY": "ty" },{ "KEY": "20023713", "VALUE": "小五", "PY": "xw" },{ "KEY": "2002313", "VALUE": "何炅", "PY": "hj" },{ "KEY": "20023713", "VALUE": "周潤發(fā)", "PY": "zrf" },{ "KEY": "20032713", "VALUE": "周星馳", "PY": "zxc" },{ "KEY": "20231713", "VALUE": "春哥", "PY": "ch" },{ "KEY": "20231713", "VALUE": "曾哥", "PY": "zg" },{ "KEY": "20231713", "VALUE": "無敵春哥", "PY": "wdcg" },{ "KEY": "20231713", "VALUE": "張國榮", "PY": "zgr" },{ "KEY": "200231713", "VALUE": "流星", "PY": "lx" },{ "KEY": "200231713", "VALUE": "趙子龍", "PY": "zzl" },{ "KEY": "20081713", "VALUE": "張飛", "PY": "zf" },{ "KEY": "20081713", "VALUE": "關(guān)羽", "PY": "gy" },{ "KEY": "20081713", "VALUE": "梅艷芳", "PY": "myf" },{ "KEY": "20081713", "VALUE": "陳佩斯s", "PY": "cps" },{ "KEY": "20081713", "VALUE": "陳佩斯", "PY": "cps" },{ "KEY": "20081713", "VALUE": "劉備", "PY": "lb" },{ "KEY": "20081713", "VALUE": "呂布", "PY": "lb" }];var DpD;window.onload = function () {var _DropDown_TextBox = document.getElementById("DropDown_TextBox");DpD = new HXZ.DropDown(_DropDown_TextBox, "DropDown_Container");DpD.DropDown_HostDiv = document.getElementById("DropDown_HostDiv");DpD.FireWhenConfrimMethod = DpD_FireWhenConfrimMethod;DpD.Init(data, "KEY", "VALUE", "PY");}function DpD_FireWhenConfrimMethod(itemValue, itemKey) {//可以在這里彈出相應(yīng)的鍵值//alert("鍵"：+itemValue+ " 值："+ itemKey );}</script></head><body><div class='Control_Div'><span style='float: left; font-weight: bold'>姓名:</span><div class="DropDown_HostDiv" id="DropDown_HostDiv"><input type="text" class="DropDown_TextBox" id="DropDown_TextBox" /></div></div></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生

------分隔線----------------------------

上一篇 Js彈出DIV遮罩層并在頁面居中顯示效果

下一篇 鏈接交易市場觀察附鏈接交易形式的服務(wù)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript實現(xiàn)下拉框自動提示效果