自动搜索 SELECT 标签

• 下载源代码 - 2 Kb

引言

如果您经常上网，您会发现 <select> 列表。在我遇到的所有情况下，都使用默认的单字符搜索来帮助您“快速”找到您想要的列表项。 例如，要在州列表中找到北卡罗来纳州，您需要键入“N”，这会将您带到内布拉斯加州。“O”会将您带到俄亥俄州，因此您将很快学会键入“N”并向下箭头 6 次以获得“北卡罗来纳州”。

我认为我们可以做得更好。

一个自动搜索的 <select> 列表将允许我们键入“No”并自动获得“北卡罗来纳州”。密西西比州和阿肯色州是其他很好的例子。 几行客户端 JavaScript 可以解决这个麻烦。 我在下面包含了美国各州两种类型的 <select> 列表的示例，请尝试一下。

标准非搜索选择列表

阿拉巴马州 阿拉斯加州 亚利桑那州 阿肯色州 加利福尼亚州 科罗拉多州 康涅狄格州 特拉华州 哥伦比亚特区 佛罗里达州 格鲁吉亚 夏威夷 爱达荷州 伊利诺伊州 印第安纳州 爱荷华州 堪萨斯州 肯塔基州 路易斯安那州 缅因州 马里兰州 马萨诸塞州 密歇根州 明尼苏达州 密西西比州 密苏里州 蒙大拿州 内布拉斯加州 内华达州 新罕布什尔州 新泽西州 新墨西哥州 New York 北卡罗来纳州 北达科他州 俄亥俄州 俄克拉荷马州 俄勒冈州 宾夕法尼亚州 罗德岛州 南卡罗来纳州 南达科他州 田纳西州 德克萨斯州 犹他州 佛蒙特州 弗吉尼亚州 Washington 西弗吉尼亚州 威斯康星州 怀俄明州

自动搜索选择列表

阿拉巴马州 阿拉斯加州 亚利桑那州 阿肯色州 加利福尼亚州 科罗拉多州 康涅狄格州 特拉华州 哥伦比亚特区 佛罗里达州 格鲁吉亚 夏威夷 爱达荷州 伊利诺伊州 印第安纳州 爱荷华州 堪萨斯州 肯塔基州 路易斯安那州 缅因州 马里兰州 马萨诸塞州 密歇根州 明尼苏达州 密西西比州 密苏里州 蒙大拿州 内布拉斯加州 内华达州 新罕布什尔州 新泽西州 新墨西哥州 New York 北卡罗来纳州 北达科他州 俄亥俄州 俄克拉荷马州 俄勒冈州 宾夕法尼亚州 罗德岛州 南卡罗来纳州 南达科他州 田纳西州 德克萨斯州 犹他州 佛蒙特州 弗吉尼亚州 Washington 西弗吉尼亚州 威斯康星州 怀俄明州

工作原理

基本上，驱动上面的自动搜索 <select> 的 javascript 代码将每次击键记录在一个隐藏的输入标签中，并使用所有击键来搜索列表中匹配的选项。 可能会想到一些问题，例如“如何清除之前捕获的击键？”。 onBlur() 和 onFocus() 事件会清除之前的击键，但是如果在不将焦点从 <select> 列表移开的情况下开始新的搜索呢？ 在这种情况下，我使用了 Delete 键。 我决定不使用 BackSpace 键，因为许多浏览器使用 BackSpace 来导航到上一页。

如何使用 AutoSearch <select>

首先，将 selectKeyDown()、selectKeyPress() 和 clr() javascript 函数添加到您的页面，可以在源代码下载中找到，或者直接 View->查看此页面的源代码。

接下来，将 onBlur()、onFocus()、onKeyPress() 和 onKeyDown() 事件处理程序添加到您的 <select> 标签

最后，添加一个名为“keys”的隐藏输入标签来存储之前的击键

如果您像我一样偶尔会犯错，进行一些调试，您的 <select> 标签将永远不会一样。

代码

// Java Script to Handle AutoSearch
function selectKeyDown()
{
    // Delete Key resets previous search keys
    if(window.event.keyCode == 46)
        clr();
}
function selectKeyPress()
{
    // Notes:
    //    1) previous keys are cleared onBlur/onFocus and with Delete key
    //    2) if the search doesn't find a match, this returns to normal 1 key 
    //        search setting returnValue = false below for ALL cases will 
    //        prevent default behavior
    
    //TODO:
    //    1) add Netscape handling
    

    var sndr = window.event.srcElement;
    var pre = this.document.all["keys"].value;
    var key = window.event.keyCode;
    var char = String.fromCharCode(key);

    // "i" -> ignoreCase
    var re = new RegExp("^" + pre + char, "i"); 

    for(var i=0; i<sndr.options.length; i++)
    {
        if(re.test(sndr.options[i].text))
        {
            sndr.options[i].selected=true;
            document.all["keys"].value += char;
            window.event.returnValue = false;
            break;
        }
    }
}
function clr()
{
    document.all["keys"].value = "";
}

测试过的浏览器

1. Internet Explorer 6.0.2800
2. Mozilla 1.2.1

待办事项

1. 添加 Netscape Navigator 处理。
2. 测试其他和较旧的浏览器。
3. 请告诉我您对此的评论。

历史

发布 03/02/2003