程序员人生网站导航

JavaScript实现下拉框自动提示效果

栏目：特效时间：2014-06-05 12:39:44

　　Javascript 实现的自动提示下拉框，作者给他命名为：Auto_Suggest_DropDownControl，下边是引用作者的原文：

　　刚做BS开发没多久，之前一直是做CS开发，接触的比较多的是后台及数据库。一开始接触一些HTML+CSS+JavaScript稍显吃力，最近公司需要一个自动提示下拉控件的需求，主要是用于选择客户，可以输入简拼进行搜索。所以开始在脑子里构思整个控件的流程，然后结合MSDN文档，慢慢的做出了个雏形，觉得还不错，想写一篇博文将其记录下来。

　　控件功能

　　用户输入值，该值去匹配项的简拼或者项的显示值，弹出相应的匹配项，鼠标点击某项或者键盘上下键进行选取后回车得到某项值。

　　……详细阅读：原文

　　实例演示：

<!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实现文本框下拉自动提示——最火软件站【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;//选中某项的时候触发的扩展方法_this.FireWhenConfrimMethod;_this.IsJudgeDirection = false;_this.DropDown_DivZindex = 30;_this.DropDown_HostDiv = document.body;//初始化指定数据域以及数据源中键值字段字符串和拼音字段字符串_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.wfuyu.com_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");}//如果用户更改了输入框的值的时候，我们自动将其修复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": "周润发", "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": "关羽", "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) {//可以在这里弹出相应的键值//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刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 Js弹出DIV遮罩层并在页面居中显示效果

下一篇 链接交易市场观察附链接交易形式的服务

------分隔线----------------------------