ajax 下拉菜单的键盘导航答案

【问题标题】：keyboard navigation for ajax drop downajax 下拉菜单的键盘导航
【发布时间】：2011-05-15 03:30:08
【问题描述】：

我将以下代码用于 Ajax 下拉建议（一些类似于 google 建议）。它运作良好。

[来源]：此代码的http://www.dynamicajax.com/

html 中的代码

<html lang="en-US">
    <head>
        <style type="text/css" media="screen">
            body {
                font: 11px arial;
            }
            .suggest_link {
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            .suggest_link_over {
                background-color: #3366CC;
                padding: 2px 6px 2px 6px;
            }
            #search_suggest {
                position: absolute;
                background-color: #FFFFFF;
                text-align: left;
                border: 1px solid #000000;
            }
        </style>
        <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    </head>
    <body>
        <h3><a href="http://www.DynamicAJAX.com" style="color: #000000; text-decoration: none;">Simple AJAX Search Suggest</a></h3>


        <form id="frmSearch">
            <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest(this.value);" autocomplete="off" />
           <!-- <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />-->
            <div id="search_suggest">
            </div>
        </form>
    </body>
</html>

javascript 中的代码

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
 } else if(window.ActiveXObject) {
           // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
 } else {
  alert("It's about time to upgrade your browser. don't you think so?");
 }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
 if (searchReq.readyState == 4 || searchReq.readyState == 0) {
  var str = escape(document.getElementById('txtSearch').value);
  searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
  searchReq.onreadystatechange = handleSearchSuggest;
  searchReq.send(null);
 }
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
 if (searchReq.readyState == 4) {
  var ss = document.getElementById('search_suggest')
  ss.innerHTML = '';
  var str = searchReq.responseText.split("\n");
  for(i=0; i < str.length - 1; i++) {
   //Build our element string.  This is cleaner using the DOM, but
   //IE doesn't support dynamically added attributes.
   var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
   suggest += 'onmouseout="javascript:suggestOut(this);" ';
                        suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
   suggest += 'class="suggest_link">' + str[i] + '</div>';
   ss.innerHTML += suggest;
  }
 }
}

//Mouse over function
function suggestOver(div_value) {
 div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
 div_value.className = 'suggest_link';
}

//Click function
function setSearch(value) {
 document.getElementById('txtSearch').value = value;
 document.getElementById('search_suggest').innerHTML = '';
}

现在我想知道是否可以借助按键在下拉列表中导航。即

使用向下箭头键打开一个下拉列表。打开下拉列表后，用户可以使用向上箭头、向下箭头、Home、End、Page Up、Page Down 键在下拉项目之间导航，然后使用 Enter 键选择一个项目。要关闭列表而不更改值，用户可以按 Esc 键。

很高兴拥有上述所有功能。 - 仅在可行的情况下。

但需要使用向上箭头、向下箭头导航。 - 需要这 2 个方面的帮助

提前致谢！

【问题讨论】：

标签： php html ajax

【解决方案1】：

您的意思是自动完成选项出现在您的文本输入下吗？在这种情况下，你想为按键设置一个选项，如果它是一个向下箭头，你可以用“mouse_out”为$（this）元素做同样的事情，“mouse_over”为它下面的元素做同样的事情。对于向上箭头，与上面的箭头相同。

首先，您将需要每个 div 上的 id，并使它们按顺序排列。然后为按键添加功能

 for(i=0; i < str.length - 1; i++) {
   //Build our element string.  This is cleaner using the DOM, but
   //IE doesn't support dynamically added attributes.
   var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
   suggest += 'onmouseout="javascript:suggestOut(this);" ';
                    suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';

                    suggest += 'onkeypress="javascript:keyPressFunc(k,this);' //THIS IS NEW
                    suggest += 'id="item"+i'; //THIS IS THE NEW LINE TO ADD

   suggest += 'class="suggest_link">' + str[i] + '</div>';
   ss.innerHTML += s
}

function keyPressFunc(k, comesFrom)
{
    keyIn = k.keyCode;
    suggestOut(this);
    getsFocusId = "item" + 39-keyIn  //38 is up arrow, 40 is down
    suggestOver(document.getElementById(getFocusId));
}

我可能弄乱了传入键和报告元素的参数，但这就是想法。即使缺少一些细节，粗略的笔触也是合理的：

1) 为每个 div 添加唯一的（和顺序的）ID
2）为keypress添加一个事件，使用.keyCode获取值，向上箭头是40向下是38，回车是13 esc是27。page up，pagedown，end，home是33-36
3）对于其中的每一个，您必须为获取按键的 div 执行您当前为建议输出所做的操作，以及您当前为其他操作为SuggestOver 所做的操作

我已经有一段时间没有在 vanilla javascript 中做过类似的事情了，所以这就是我模糊的原因。我想你真的会从这里的 jQuery 中受益，我知道我会的。

PS - 获取 jQuery。然后，您可以使用

之类的东西非常轻松地设置这些事件

$(".suggest_link").keypress(function(k) {.....

【讨论】：