Question

我正在使用以下代码进行Ajax下拉建议（有些类似于谷歌的建议）。它运作良好。

[来源]：此代码的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 = '';
}

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

使用向下箭头键打开下拉列表。打开下拉列表后，用户可以使用向上箭头，向下箭头，主页，结束，向上翻页，向下翻页键在下拉项目之间导航，然后使用回车键选择项目。要在不更改值的情况下关闭列表，用户可以按Esc键。

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

但需要使用向上箭头，向下箭头进行导航。 - 需要这些2的帮助

提前致谢！

Answer 1

您的意思是在文字输入下出现自动填充选项吗？在这种情况下，你想为keypress设置一个选项，如果它是向下箭头你做的是你现在用$（this）元素的“mouse_out”做的事情，以及它下面的那个做的“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）为按键添加事件，使用.keyCode获取值，向上箭头为40向下为38，输入为13 esc为27.向上翻页，向下翻页，结束，回家为33-36
3）对于这些中的每一个，你必须做你目前为suggestOut做的事情，对于接受按键的div，以及你目前为suggestOver为另一个做什么

我在很长一段时间内没有在香草javascript中做过这样的事情，这就是为什么我模糊了。我想你在这里真的受益于jQuery，我知道我愿意。

PS - 获取jQuery。然后你可以用

这样的东西轻松设置这些事件

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

键盘导航为ajax下拉

1 个答案: