CODEWITHSUNDEEP
phphtmlajax
satya
satya

Reputation: 1949

keyboard navigation for ajax drop down

I am using the following code for Ajax dropdown suggest(some what similar to google suggest). It is working good.

[source]: http://www.dynamicajax.com/ of this code

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

Now i wanted to know if i can navigate in the dropdown list with the help of keys. i.e

open a drop-down list by using the Down Arrow key. After opening a drop-down list, the user can navigate between drop-down items with the Up Arrow, Down Arrow, Home, End, Page Up, Page Down keys and then select an item with the Enter key. To close the list without changing the value, the user can press the Esc key.

Its nice to have, to have all the above mentioned features. - only if it is feasible.

But naviagting with Up arrow, Down Arrow are required. - Need help for these 2

Thanks in advance!

Upvotes: 0

Views: 2953

Answers (1)

jon_darkstar
jon_darkstar

Reputation: 16768

Do you mean autocomplete options appearing under your text input? In that case you want to set an option for keypress, and if it is a down arrow you do the same thing you currently do with "mouse_out" for the $(this) element, and "mouse_over" for the one below it. For up arrow, same thing with the one above it.

First you are going to need id's on each div, and make them sequential. Then you add functions for keypresses

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

I might have messed up the arguments for the incoming key and the reporting element, but thats the idea. The broad strokes are sound even if some details are missing:

1) add unique (and sequential) id's to each of these divs
2) add an event for keypress, use .keyCode to get value, up arrow is 40 down is 38, enter is 13 esc is 27. page up, pagedown, end, home are 33-36
3) For each of these you must do what you currently do for suggestOut for the div that takes the keypress, and what you currently do for suggestOver for another

I haven't done anything like this in vanilla javascript in quite some time so thats why im fuzzy. I think you'd really benefit from jQuery here, I know I would.

PS - get jQuery. Then you can set up these events really easy with stuff like 

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

Upvotes: 1

Related Questions