在 IE Comboboxes中,在键入行为时选择

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

从浏览器 combobox 中选择元素是一个非常常见,但是令人烦恼的任务,主要是因为缺乏select-as-you-type行为。 至少在 IE 中,每个按键在 combobox 开始时选择第一个元素,所以输入元素的前两个字母的输入不会像预期那样工作。 本文提供了一个简短的JavaScript代码,你可以使用它来提供select-as-you-type行为,只需很少的修改。

使用指导

基本思想是在 combobox 上捕获和附加按键,然后在 combobox 中查找从用户按下的键列表开始的元素。 下面是完整的代码:

var keysPressed = [];function selectAsYouType(e)
{
 var keyChar; var keyNum;
 var comboBox;
 if (window.event) // Internet Explorer {
 keyNum = e.keyCode; 
 }
 else {
 returntrue; // browser doesn't support DOM, do default processing. }
 keyChar = String.fromCharCode(keyNum);
 comboBox = e.srcElement;
 if (!comboBox)
 {
 returntrue; // if DOM didn't work, do default processing }
 if (keyNum == 27) // Esc key {
 clearKeysPressed(comboBox);
 }
 else {
 return selectElement(comboBox, keyChar);
 }
 returntrue;
}function clearKeysPressed(e)
{
 if (e.srcElement)
 keysPressed[e.srcElement]="";
}function selectElement(comboBox, keyChar)
{
 var i = 0;
 var keysPressedSoFar = keysPressed[comboBox] || "";
 keysPressedSoFar += keyChar;
 keysPressed[comboBox] = keysPressedSoFar;
 var options = comboBox.options;
 for (i = 0; i<options.length; ++i)
 {
 if (options[i].text.toUpperCase().indexOf
 (keysPressedSoFar.toUpperCase(), 0) == 0)
 {
 comboBox.selectedIndex = i;
 returnfalse; // don't do default processing }
 }
 // didn't match start of any option, so reset keysPressed to just this key keysPressed[comboBox] = String(keyChar); 
 returntrue; 
}

keysPressed 是一个全局 array,用于存储页面中每个 comboboxkeysPressed。 每个需要select-as-you-type行为的combobox 都需要添加两个处理程序:

  • onkeypress="return selectAsYouType(event)" - 这可以捕获 combobox 上的按键
  • onblur="clearKeysPressed(event)" - 当焦点移出 combobox 时清除键盘缓存( 那个 combo<code> 盒子)

例如:

<select onkeypress="return selectA(event)" onblur="clearKeysPressed(event)">
 <option>A</option> <option>B</option> <option>AB</option> <option>ABC</option> <option>C</option></select>

代码相当简单。 selectElement 函数接受当前按下的键,将它添加到到目前为止按下的键并检查 combobox 中是否有元素以由 keysPressedSoFar 组成的string 开始。 如果没有匹配项,则返回 true 以恢复浏览器的默认行为。

Points of Interest

一个可能的改进是使用更好的算法来搜索以特定 string 开始的元素。 这里代码已经在包含 ~2800 元素( 点击这里以获得一个例子。)的combobox es中进行了测试,但没有出现任何性能问题。

历史记录

  • 初始帖子- 12:11 2/24/2007

COM  INT  EXP  type  Select  Intern  
相关文章