自动选择从下拉列表中选择( 渐进式搜索,自动完成) 作为用户键

分享于 

6分钟阅读

Web开发

  繁體

Sample screenshot

介绍

通常,HTML不支持最接近的匹配。 它总是把每个键笔画当作新搜索的开始。 如果类型是'C',它会转到第一个以C 开头的项;如果立即输入'o',它会转到第一个以'o'开头的项。 但是在这个实现中,它将转到'co'。

如果用户拼写错误,用户可以使用退格键删除字符'o',并键入另一个字母来选择另一个项目。 用户可以等待 3秒开始一个新搜索,或者使用退格键删除整个搜索键,或者移除删除以再次重新启动。

它能找到最接近的匹配。 所以,它不需要按任何顺序。

  • 只需在目标HTML中包含 。js文件:
<scriptlanguage="JavaScript"src="dropdown.js"></script>
  • 将这些事件添加到下拉字段:
onfocus="this.enteredText='';" onkeydown="return handleKey();" 
 onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();"

例如:

<selectname="test"onfocus="this.enteredText='';"onkeydown="return handleKey();"onkeyup="event.cancelbubble=true;return false;"onkeypress="return selectItem();">
  • onfocus 重置搜索文本。
  • onkeydown 处理某些键( 左,右,上,下,下,移,退格) 并采取适当的操作。
  • onkeypress 从列表中处理项的选择。
  • onkeyup 忽略事件,因为 onkeypress 已经处理了键。
  • 使用 IE 打开HTML文件。
  • 键入'a',它将带你到以'a'开头的第一个项目。 然后,键入'b';这将带你到以'ab'开头的第一个项目。 这使用最近的匹配算法。 因此,该列表不需要按任何顺序进行。
  • 用户可以在下拉列表中搜索字符串。
  • 它自动选择从搜索键开始的列表项。
  • 用户可以使用退格键从搜索键的当前索引之前删除字符。
  • 用户可以使用删除按钮从搜索键的当前索引之后删除字符。
  • 用户可以使用左键或者右箭头键在搜索键上移动,并使用 delete or backspace to delete a char; 在列表中自动查找项。
  • 按Shift键和删除键将删除搜索键并重新开始搜索。
  • 用户可以在 Windows 状态栏上看到搜索键。 它也显示了当前的索引。

我在这里添加wiki建议,这样它就可以用于每一个。 如果要更改页面中的所有下拉框以具有这里功能,请在 onload 事件中调用以下内容:

function setSelectEvents() {
 // set javascript event attributes// for all select items in the current pagevar selects = document.getElementsByTagName("select");
 var arrOnfocus = new Array(); // array of onfocus functionsvar arrOnkeydown = new Array(); // array of onkeydown functionsvar arrOnkeyup = new Array(); // array of onkeyup functionsvar arrOnkeypress = new Array(); // array of onkeypress functionsfor (var i = 0; i <selects.length; i++) {
 // we need to ensure that// we don't overwrite any existing function// save index to array as an element attribute// (using i directly did not work) selects[i].title = i;
 // onfocusif(typeof(selects[i].onfocus) == 'function') {
 // there is a pre-existing function// save pre-existing function arrOnfocus[selects[i].title] = selects[i].onfocus;
 selects[i].onfocus = 
 function() { arrOnfocus[this.title](); this.enteredText=''; }
 // set event to call our code plus the pre-existing function }
 else { // there is no pre-existing function selects[i].onfocus = function() { this.enteredText=''; }
 }
 // onkeydownif(typeof(selects[i].onkeydown) == 'function') {
 // there is a pre-existing function// save pre-existing function arrOnkeydown[selects[i].title] = selects[i].onkeydown;
 selects[i].onkeydown = 
 function() { arrOnkeydown[this.title](); return handleKey(); }
 // set event to call our code plus the pre-existing function }
 else { // there is no pre-existing function selects[i].onkeydown = function() { return handleKey(); }
 }
 // onkeyupif(typeof(selects[i].onkeyup) == 'function') {
 // there is a pre-existing function// save pre-existing function arrOnkeyup[selects[i].title] = selects[i].onkeyup;
 selects[i].onkeyup = 
 function() { arrOnkeyup[this.title](); 
 event.cancelbubble=true;returnfalse; }
 // set event to call our code plus the pre-existing function }
 else { // there is no pre-existing function selects[i].onkeyup = 
 function() { event.cancelbubble=true;returnfalse; }
 }
 // onkeypressif(typeof(selects[i].onkeypress) == 'function') {
 // there is a pre-existing function// save pre-existing function arrOnkeypress[selects[i].title] = selects[i].onkeypress;
 selects[i].onkeypress = 
 function() { arrOnkeypress[this.title](); return selectItem(); }
 // set event to call our code plus the pre-existing function }
 else { // there is no pre-existing function selects[i]. &#246;nkeypress = function() { return selectItem(); }
 }
 }
}

COM  AUTO  USE  用户  KEY  搜索  
相关文章