Tastaturnavigation für Ajax Dropdown

Ich benutze den folgenden Code für Ajax Dropdown vorschlagen (einige ähnliche wie Google vorschlagen). Es funktioniert gut.Tastaturnavigation für Ajax Dropdown

[Quelle]: http://www.dynamicajax.com/ dieses Codes

Code in 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>

Code in 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 = ''; 
}

Nun wollte ich wissen, ob ich in navigieren die Dropdown-Liste mit Hilfe von Schlüsseln. d. h.

Öffnen Sie eine Dropdown-Liste mit der Nach-unten-Taste. Nach dem Öffnen einer Dropdown-Liste kann der Benutzer zwischen den Dropdown-Elementen mit den Tasten Pfeil nach oben, Pfeil nach unten, Pos1, Ende, Bild auf und Bild ab navigieren und dann mit der Eingabetaste einen Eintrag auswählen. Um die Liste zu schließen, ohne den Wert zu ändern, kann der Benutzer die Esc-Taste drücken.

Es ist schön zu haben, um alle oben genannten Funktionen zu haben. - nur wenn es machbar ist.

Aber Naviagting mit Pfeil nach oben, Pfeil nach unten sind erforderlich. - Brauchen Sie Hilfe für diese 2

Vielen Dank im Voraus!

Quelle

2010-11-24 satya

Meinen Sie, dass die Optionen zur automatischen Vervollständigung unter Ihrer Texteingabe erscheinen? In diesem Fall möchten Sie eine Option für den Tastendruck festlegen, und wenn es ein Pfeil nach unten ist, tun Sie das gleiche, was Sie derzeit mit "mouse_out" für das Element $ (this) und "mouse_over" für das darunter liegende tun. Für den Pfeil nach oben, dasselbe mit dem darüber.

Zuerst werden Sie IDs auf jedem Div benötigen und sie sequenziell machen. Dann fügen Sie Funktionen für Tastenanschläge

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)); 
}

ich verwirrt haben könnte, die Argumente für den eingehenden Taste nach oben und Berichtselement, aber das ist die Idee. Die breiten Striche sind solide, auch wenn einige Details fehlen:

1) in einzigartige (und sequentiell) ids zu jedem dieses divs für keypress ein Ereignis
2) hinzuzufügen, verwenden .keyCode Wert zu erhalten, Pfeil nach oben ist 40 down ist 38, eingeben ist 13 esc ist 27. Seite nach oben, pagedown, ende, home sind 33-36
3) Für jede von diesen müssen Sie tun, was Sie derzeit für suggestOut für das div tun, das den Tastendruck dauert, und Was Sie derzeit für suggestOver für eine andere tun

Ich habe nicht so etwas in Vanille Javascript in ziemlich viel Zeit getan, so dass warum im fuzzy. Ich denke du würdest hier wirklich von jQuery profitieren, ich weiß ich würde es tun.

PS - get jQuery. Dann können Sie diese Ereignisse wirklich einfach mit Sachen wie

Quelle

2010-11-24 15:02:06

einrichten +1, Thanku :) Dies ist, was ich suche !! – satya

Tastaturnavigation für Ajax Dropdown

Antwort

Verwandte Themen