使用autosearch和弹出工具提示的控件和列表框 ASP.NET 控件

分享于 

11分钟阅读

Web开发

  繁體

Sample Image - xNetComponents.gif

介绍

当我参与了一个使用 DropDownListListBox s 选择人。部门和 等等的项目时,我的客户问我是否能在键盘上键入字符。 而且,我试图让他更轻松。 最初,它只是JavaScript代码,现在它拥有 ASP.NET 服务器控件。 因此,我想描述两个 ASP.NET 服务器控件: xNetDropDownListxNetListBox,当用户键入键盘上的字符时,可能会将焦点移动到列表上最合适的项目。

背景

这两个组件的工作原理相似;因此,我将描述 xNetDropDownList。 在客户端元素 xNetDropDownList 中,表示为一个 HTML <select> 框。 当元素接收焦点时,工具提示将显示为 上面。 输入的字符在工具提示中表示,焦点移到列表中第一个合适的项。 按esc键删除所有输入的字符,焦点移到第一个项。 退格键删除最后输入的字符。 焦点移动到列表中的项,在删除字符后对应于工具提示中的文本。 当某个元素失去焦点时,工具提示消失。

为了正确工作,项目列表必须按升序排序 !

实现

组件 xNetDropDownList 继承自 System.Web.UI.WebControls.DropDownList 添加了几个新属性。 它们主要用于设置工具提示的可视参数。 这些属性在表中描述:

public 属性类型描述
ToolTipHidebool获取或者设置工具提示的可见性; false 要显示工具提示, true 不显示。
ToolTipBackColorColor获取或者设置 background 颜色。
ToolTipBorderColorColor获取或者设置边框颜色。
ToolTipBorderStyleBorderStyle获取或者设置边框样式。
ToolTipBorderWidthUnit获取或者设置边框宽度。
ToolTipFontFamily字符串获取或设置字体名称的排序数组.
ToolTipFontSizeFontUnit获取或设置字体大小.
ToolTipFontBoldbool获取或者设置一个值,该值指示字体是否为粗体。
ToolTipForeColorColor获取或者设置文本的颜色。
ToolTipOffsetLeftint获取或者设置工具提示左上点的水平移动,作为 DropDownList 或者 ListBox的坐标。 度量单位是像素。 在属性设计器中,只需图( 整数) 是在。
ToolTipOffsetTopint获取或者设置工具提示左顶部的垂直移动,作为 DropDownList 或者 ListBox的坐标。 度量单位是像素。 在属性设计器中只显示( 整数) 是在。
ToolTipPaddingUnit获取或者设置要在文本和边框之间插入的间距量。
ToolTipInitialWidthUnit获取或者设置初始宽度。
ToolTipZIndexint获取或者设置z 索引。
ToolTipSaveTextbool获取或者设置保存工具提示中键入的文本。 if true 当元素失去焦点并再次获取焦点时,将保存键入的文本。 if false 文本中键入的文本丢失。

下图给出了 ToolTipOffsetLeftToolTipOffsetTop 属性的说明:

在列表中搜索合适的项的功能是在JavaScript上实现的。

函数 xOnFocus() 用于创建和设置工具提示的属性。 第1 次接收焦点时,就会创建新的HTML元素;否则,该函数将使用 ToolTipSaveTextToolTipHide 属性中的设置控制工具提示的行为。

function xOnFocus(elm)
{
 var el = document.getElementById('div_' + elm.id);
 if (!el)
 {
 var xdiv = document.createElement('DIV');
 xdiv.id = 'div_' + elm.id;
 xdiv.noWrap = true;
 xdiv.style.position = 'absolute';
 xdiv.ToolTipText = '';
 xdiv.style.color = elm.ToolTipForeColor;
 xdiv.style.width = elm.ToolTipInitialWidth;
 xdiv.style.padding = elm.ToolTipPadding;
 xdiv.style.display = (elm.ToolTipHide == 'false')? 'inline' : 'none';
 xdiv.style.backgroundColor = elm.ToolTipBackColor; 
 xdiv.style.borderColor = elm.ToolTipBorderColor; 
 xdiv.style.borderStyle = elm.ToolTipBorderStyle; 
 xdiv.style.borderWidth = elm.ToolTipBorderWidth; 
 xdiv.style.fontFamily = elm.ToolTipFontFamily; 
 xdiv.style.fontSize = elm.ToolTipFontSize; 
 xdiv.style.fontWeight = elm.ToolTipFontBold;
 xdiv.style.zIndex = elm.ToolTipZIndex;
 if (document.documentElement && document.documentElement.scrollTop)
 xdiv.style.top = document.documentElement.scrollTop + 
 elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
 else xdiv.style.top = document.body.scrollTop + 
 elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
 if (document.documentElement && document.documentElement.scrollLeft)
 xdiv.style.left = document.documentElement.scrollLeft + 
 elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);
 else xdiv.style.left = document.body.scrollLeft + 
 elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);
 elm.insertAdjacentElement('afterEnd', xdiv);
 }
 else {
 if (document.documentElement && document.documentElement.scrollTop)
 el.style.top = document.documentElement.scrollTop + 
 elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
 else el.style.top = document.body.scrollTop + 
 elm.getBoundingClientRect().top - parseInt(elm.ToolTipOffsetTop);
 if (document.documentElement && document.documentElement.scrollLeft)
 el.style.left = document.documentElement.scrollLeft + 
 elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);
 else 
 el.style.left = document.body.scrollLeft + 
 elm.getBoundingClientRect().left + parseInt(elm.ToolTipOffsetLeft);
 if (elm.ToolTipSaveText == 'false') 
 {
 el.innerText = '';
 el.ToolTipText = '';
 }
 el.style.display = (elm.ToolTipHide == 'false')? 'inline': 'none';
 }
}

函数 xOnBlur() 隐藏工具提示:

function xOnBlur(elm)
{
 var el = document.getElementById('div_' + elm.id);
 if (el) el.style.display = 'none';
}

函数 xOnKeyUp() 处理按下以下键: 请注意,如果属性 AutoPostBack 为,则返回 true 除了 DropDownListListBox 控件的标准行为之外,当用户按下输入键时,将发生一个自动的postback。

function xOnKeyUp(key_event)
{
 var lb = key_event.srcElement;
 var el = document.getElementById('div_' + lb.id);
 if (el)
 {
 if (key_event.keyCode == 8)
 {
 key_event.returnValue = false;
 if (el.ToolTipText.length> 0)
 el.ToolTipText = 
 el.ToolTipText.substr(0, el.ToolTipText.length - 1);
 el.innerText = el.ToolTipText + ' ';
 xFindItem(el.ToolTipText, lb);
 }
 if (key_event.keyCode == 27)
 {
 key_event.returnValue = false;
 el.ToolTipText = '';
 el.innerText = '';
 xFindItem(el.ToolTipText, lb);
 }
 if (key_event.keyCode == 13)
 {
 key_event.returnValue = true;
 if (lb.AutoPostBack == 'true') lb.onchange();
 }
 }
}

函数 xOnKeyPress() 处理字母数字字符:

function xOnKeyPress(key_event)
{
 var lb = key_event.srcElement;
 var el = document.getElementById('div_' + lb.id);
 if (el)
 {
 if (key_event.keyCode!= 13)
 { 
 el.ToolTipText = el.ToolTipText + String.fromCharCode(key_event.keyCode); 
 el.innerText = el.ToolTipText +' ';
 xFindItem(el.ToolTipText, lb);
 }
 key_event.returnValue = false;
 }
}

函数 xFindItem() 是主要函数,它负责搜索列表中的项。

function xFindItem(s, lb)
{
 s = s.toUpperCase();
 var slen = s.length;
 var lblen = lb.length;
 var lbo = lb.options;
 if (slen == 0 && lblen> 0)
 { 
 lb.selectedIndex = 0;
 return;
 }
 for (i = 0; i <lblen; i++)
 { 
 if (lbo[i].text.toUpperCase().substr(0, slen) == s)
 {
 lb.selectedIndex = i;
 break;
 }
 }
}

这些组件在 IE 版本 6.0中进行了测试。

使用代码

你可以像其他任何web服务器控件一样使用这里控件。

范例

演示项目包含三个页面:

  • Sample1.aspx - xNetDropDownListxNetListBox 包含直接通过 ListItem Collection 编辑器输入的姓和名的列表。 此页演示组件的一般工作。
  • Sample2.aspx - xNetDropDownListxNetListBox 连接到Northwind数据库( SQL Server )。 请记住更改连接字符串中的用户名和密码 !
  • Sample3.aspx - 呈现不同的外观变体。

历史记录

  • 10th 2006年月
    • 已经提交文章。
  • 2006年月
    • 按Enter键问题已经解决。
  • 18th 2006年月
    • tab键的问题已经更正。
  • 第六 2006年月
    • 通过代码设置属性的问题已经解决。
  • 15th 2006年月
    • 调整窗口大小后工具提示位置的问题,并修复了与 DOCTYPE的,。 感谢 Ondra Jires。

tool  控制  AUTO  asp-net  lis  列表  
相关文章