下拉框模糊查询的实现

最新推荐文章于 2024-07-22 03:49:38 发布

cx136295988

最新推荐文章于 2024-07-22 03:49:38 发布

阅读量4.5k

点赞数 1

分类专栏： html js 文章标签： js jsp

本文链接：https://blog.csdn.net/cx136295988/article/details/51162524

版权

本文展示了如何使用JavaScript实现HTML下拉框的模糊查询功能。通过创建`xSelectList`函数，实现了输入框中输入关键词时，下拉列表动态过滤显示匹配项。详细代码包括了初始化、事件处理和样式设置。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> xSelectList Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
下拉列表控件演示

<HR>
基于div生成
<HR>
<td><input id="zlis"></input></td>
</BODY>
</HTML>
<script language="javascript">
/*
* 模糊查询
* 返回参数无
*/
function xSelectList(c) {
var me = this;
this.id = c.id;
this.dom = c.dom;
this.usetype = c.usetype;
this.ifmult = c.ifmult;
this.defvalue = c.value;
this.onchange = c.onchange;
this.onselected = c.onselected;
this.ondropdown = c.ondropdown;
this.caption = c.caption;
this.size = c.size;
this.ui = {};
this.ui.box = null;
this.ui.btn = null;
this.info = {};
this.info.type = false;
this.info.flag = false;
this.info.tagname = "";
this.info.readered = false;
this.showdiv = null;
this.showtab = null;
this.data = [];
this.result = [];
this.keyword = "";
this.isIE = navigator.userAgent.search('MSIE') > 0;
this.config = {};
this.config.css = {};
this.config.css.box = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM: Silver 1px solid;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;";
this.config.css.textarea = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM: Silver 1px solid;width:100%;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0";
this.config.css.btn = "BORDER-RIGHT: gray 1px solid; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;line-height:14px;FONT-FAMILY: marlett;";
this.config.css.btn1 = "BORDER-RIGHT: gray 1px solid;width:18px; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;";
this.config.css.listdiv = "BORDER-LEFT: Silver 1px solid;visibility:visible;BORDER-RIGHT:Silver 1px solid;BORDER-BOTTOM: Silver 1px solid;position:absolute;overflow-y:hidden;SCROLLBAR-FACE-COLOR: #D2D2D2;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0;";// height:180px;left:795px;top:23px;width:158px;
this.config.css.tableall = "FONT-FAMILY:'宋体';FONT-SIZE: 12px;CURSOR:pointer;cellpadding:0;cellspacing:0;BORDER-BOTTOM: Silver 0px solid;width:100%;";
this.config.css.span = "FONT-SIZE: 12px;";
if (c.dom == null || c.dom == "" || typeof (c.dom) == "undefined") {
this.dom = document.body;
} else {
if (typeof (c.dom) == "string") {
var tmpdom = document.getElementById(c.dom);
if (!tmpdom) {
tmpdom = document.getElementsByName(c.dom);
}
;
if (tmpdom) {
this.dom = tmpdom;
} else {
this.dom = document.body;
}
} else {
this.dom = c.dom;
}
}
;
if (c.id == "" || c.id == null || typeof (c.id) == "undefined") {
this.id = "xselectlist"
}
;
if (document.getElementById(this.id) || document.getElementsByName(this.id)) {
if (document.getElementById(this.id)) {
this.info.type = true;
document.getElementById(this.id).name = this.id;
} else {
this.info.type = true;
document.getElementsByName(this.id).id = this.id;
}
}
;
if (c.onchange == "" || c.onchange == null
|| typeof (c.onchange) == "undefined") {
this.onchange = function() {
};
} else {
if (typeof (c.onchange) == "function") {
this.onchange = c.onchange;
} else {
this.onchange = function() {
};
}
}
;
if (c.onselected == "" || c.onselected == null
|| typeof (c.onselected) == "undefined") {
this.onselected = function() {
};
} else {
if (typeof (c.onselected) == "function") {
this.onselected = c.onselected;
} else {
this.onselected = function() {
};
}
}
;
if (c.ondropdown == "" || c.ondropdown == null
|| typeof (c.ondropdown) == "undefined") {
this.ondropdown = function() {
};
} else {
if (typeof (c.ondropdown) == "function") {
this.ondropdown = c.ondropdown;
} else {
this.ondropdown = function() {
};
}
}
;
if (this.info.type) {
var tmpnode = document.getElementById(this.id);
if (tmpnode) {
var nodeType = tmpnode.tagName.toLowerCase();
this.info.tagname = nodeType;
}
}
;