可拖动、自动隐藏定位的自动完成控件

• 下载定位器 - 82.4 KB

引言

网站经常需要根据一个或两个链接列表中的值将其位置更改为适当的 URL。 如果您想创建一个根据一级或二级链接（例如，州和县）更改网站位置的控件，您可以使用此控件。 我已经在 IE 7 和 Firefox 2.0 中进行了测试。 这种解决方案的优点是所有数据都存储在客户端的单独 .js 文件中，用户不必等待来自数据库或其他服务器端存储的响应。 此存储可以手动填充，也可以从数据库或 XML 文件自动填充。

功能

图 2	图 3

该控件有一个“开始”按钮。 用户单击后，会出现一个弹出窗口（图 1），其中包含三个控件：一个文本控件和两个列表框控件。 箭头按钮可以显示或隐藏。 该控件提供两种模式来选择所需的项目。 用户可以从第一个列表框中选择一个州，这些州的县随后会出现在下面的列表框中（图 1）。 您可以通过双击县，然后单击出现的箭头按钮来转到相关的 URL。 第二种（自动完成）模式适用于用户输入字母或单词的情况。 第二个列表框将自动隐藏，所有州的县列表将以升序显示在第一个列表框中（图 2）。 当用户输入的数据不足时，所有列表框都将被隐藏（图 3）。 请注意，该控件会立即对用户操作做出反应。 当用户单击其外部的任何区域时，该控件会自动隐藏。

使用代码

这是用户控件的 .NET 实现（项目中的Locator.ascx）。 服务器端 C# 代码提供了在 Page_Load 中从 XML 源文件创建 JavaScript 存储文件。 此存储文件包含存储州和县名称及其链接的数组。 为了确保检索到存储的最新版本，每次生成数据后都会更改文件名。 控件的使用取决于两个文件：包含控制功能所需的 JavaScript 代码的Locator.js 和上面定义的 JS 存储文件 (ServiceStore0/1.js)。

JavaScript 概述

JavaScript 功能代码由三个类组成

• Positions (位置)
• Drag (拖动)
• CountySearch (县搜索)

当用户单击第一个列表框中的州名称或在文本框中输入字母时，CountySearch 类提供自动完成功能。 Positions 类获取鼠标位置，计算鼠标位置的偏移量以及可拖动控件的顶部/左侧坐标，计算可拖动对象的当前位置。 Drag 类提供控件的拖动和自动隐藏功能。 拖动功能通过处理文档的 onmousemove 事件来实现。 处理函数是 Drag 类的 MouseMove 成员函数。 在这种情况下，可拖动对象是一个 ID 为 “maindiv” 的 div 标签，但在拖动此对象之前，我们必须将其激活为可拖动对象。 此操作在可拖动对象的 OnMouseDown 事件期间执行（在本例中为 “maindiv”）。 我在 Drag 类的 makeDragable() 函数中动态地将 OnMouseDown 事件附加到此对象。

this.makeDragable = function(object) // object is dragable object
{
    object.onmousedown = function() // handling function of 
    {
        OnFocus(object);
        self.dragObject = object;
        self.mouseOffset = m_Pos.getMouseOffset(object, self.mousePos);
    }
}

自动隐藏功能：可拖动对象内的所有控件和拖动对象本身都附加到 onblur 事件处理程序。 当用户单击控件外部时，拖动对象的 Focus 变量控制未聚焦/聚焦状态。 如果焦点没有返回到可拖动对象，则 timeOut 函数会在 0.3 秒后将其关闭。

使用控件

此控件是为 IE6 及更高版本以及 Firefox 2.0 设计和测试的。 该控件的自定义实现还可以通过其代码（这是一个数字）找到县。 您可以通过取消注释或注释全局 onTextKeyup(textctrl) 函数中的行来启用/禁用此功能。

function onTextKeyup(textctrl)
{
    ...
    ...
    //if (ch > 57 || ch
    //   < 48) // this is letter not digit
    //{
        county.GetCounties(textctrl.value, count, name_services, m_select1, m_div1);
    
   //}
   // else
   // {
   // county.GetCounties(textctrl.value,
       cfipses, ips_services,m_select1, m_div1);
   // }
}  

要将控件设置在页面的更高层，请在可拖动对象样式中设置适当的 z-index。

在示例中，所有县都链接到 CodeProject 主页。