asked on

Search with autocomplete that allows the keyboard arrow keys

We have a script that allows a user to enter information into a text field that queries a MySQL database and then user can click with their mouse a selected name. What we want is the user to able to use the arrow keys on the keyboard to scroll through the name and select with the enter key.

Our code is below:

<head>
<script type="text/javascript">
//<![CDATA[
/* Example 16-4. JavaScript for giving search hints to the user. */

/* This variable, hintRequest, will handle all Ajax calls for hints */
var hintRequest = null;

/**
* This function, fetchHints, is called on a keypress in the /searchBox/
* <input> element and sends an XHR to the server to get hints based on
* what the user typed, which are then displayed to the user when
* received.
*
* @param {Event} e The event calling the function.
* @return Returns true so other actions go on as planned within this
event.
* @type Boolean
* @see Prototype#emptyFunction
* @see Ajax#Request
* @see Element#show
*/
function fetchHints(e) {
            //alert('e is ' + e);
e = ((e) ? e : window.event);
var input = ((e.srcElement) ? e.srcElement : e.target);
            //var input = document.getElementById('searchBox').value;
/* Is the client already trying to get hints? */
if (hintRequest) {
hintRequest.onSuccess = Prototype.emptyFunction;
hintRequest.onFailure = Prototype.emptyFunction;
}
/* Is there anything to search on? */
if (input.value)
            //alert('input is ' + input.value);
/* Get hints based on the latest text in the input's value */
hintRequest = new Ajax.Request('getHint.php', {
method: 'post',
parameters: { hintMe: 1, searchString: input.value },
onSuccess: function(xhrResponse) {
/* Did we get a good response? */
if (xhrResponse.responseText != 0) {
$('myHints').innerHTML = xhrResponse.responseText;
$('myHints').show( );
}
hintRequest = null;
},
onFailure: function(xhrResponse) {
hintRequest = null;
}
});
return (true);
}
//<![CDATA[
/* Example 16-6. Submitting a search from hints. */

/**
* This function, executeSearch, sends a search request to the server
* for the passed /p_searchString/ and places the results in the
/innerHTML/
* of the <div> element /myResults/.
*
* @param {String} p_searchString The string that is to be searched for.
* @return Returns false so that the click event does not follow through.
* @type Boolean
* @see Ajax#Request
*/
function executeSearch(p_searchStr) {
/* Is there anything to search for? */
            //alert('pstring is ' + p_searchString);
            if (p_searchStr != '') {
            var array       = p_searchStr.split(":");
            var string       = array[0];
            var addr       = array[1];
            var facid      = array[2];
            //alert('addr is ' + addr);
            if(addr == 0) {
                  addr = 'None';
            }
            //alert('addr is now ' + addr);
            document.getElementById('myResults').style.display ="block";
            document.getElementById('facilityname').value=string;
            document.getElementById('facilitylocation').value=facid;
            document.getElementById('facloc').value=addr;
            //hide the hints div after selection
            Event.observe($('myHints'), 'onclick', $('myHints').hide($('myHints')));
            return true;
            }
return (false);
}
//]]>
/**
* This function, body_onload, is called when the page finishes
loading, and
* hides any elements that should be hidden and sets a /keyup/ event
on the
* /searchBox/ <input> element as well as a /blur/ event to hide
/myHints/.
*/
function body_onload( ) {
$('myHints').hide();
//$('myResults').hide();
Event.observe($('searchBox'), 'keyup', fetchHints, false);
Event.observe($('searchBox'), 'blur',
$('myHints').bind($('myHints')), false);

}
//]]>
</script>
</head>

then on the body tag:
<body onLoad="body_onload();">

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer