...

View Full Version : how to use arrow keys with AJAX ?



jasonpc1
03-05-2011, 09:54 AM
hello all,

I have a little problem that i hope can be solved.

senerio....

You start to type in an <input> field and a list of results show based on what you type, I have a list of Airports in MySQL that is check for LIKE of what is typed in and the matches show that can be selected. But you can only scroll with the mouse and not the arrow keys.

Does anyone know how I may allow arrow keys as well as the mouse to select their choice?

bullant
03-05-2011, 10:14 AM
I'm assuming ajax returns a list of airports to populate your select list. If that is so, then one way to do it is to give focus to the select list after the ajax call comes back and your options list is updated.

Then you can use the up/down arrows to scroll up/down the list of options.

In this demo, I just set focus to the select on window.onload to simulate giving focus to the select after the ajax call. This works in IE8 and FF3.6 and so I assume it works in the other major browsers



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Timer</title>
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName('select')[0].focus();
}
</script>
</head>
<body>
<select size="5">
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
<option>item 4</option>
<option>item 5</option>
<option>item 6</option>
<option>item 7</option>
<option>item 8</option>
<option>item 9</option>
<option>item 19</option>
<option>item 18</option>
<option>item 17</option>
<option>item 16</option>
<option>item 15</option>
</select>
</body>
</html>

jasonpc1
03-05-2011, 10:50 AM
Thank you for your reply, but I do not have AJAX show the list in a <select> method as they type it will show the results like so...



<div style="padding:5px; cursor:pointer;" onClick="setPassenger(\'',$contact['contact_id'],'\',\'',$contact['fullname'],'\',\'',$contact['email'],'\',\'',$contact['mobile'],'\');">',$contact['fullname'],'</div>

bullant
03-05-2011, 12:22 PM
ok, I've got an idea but need to see the actual html that is outputed. Post the html that code generates.

jasonpc1
03-05-2011, 01:58 PM
I have condensed the file some what, so that only the part that is needed is here.

I have tested it to make sure I have not sent a faulty code.

I have also added the getResults.php file which is used to get the results that is shown.

I think this may help in solving this problem i am getting.


index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body{
background: #999999;
padding: 0px;
margin: 0 auto;
font-family: 'Verdana';
font-size: 12px;
padding-bottom: 10px;
}

ul{
list-style: none;
padding: 0px;
margin: 0px;
}

#navbar li,#navbar1 li{
display:inline;
margin: 0px;
}

a:link,a:visited,a:active{
color: #757575;
text-decoration: none;
}

a:hover{
color: #222;
text-decoration: underline;
}

#navbar a:link,#navbar a:active,#navbar a:visited{
display:inline-block;
color: #757575;
text-decoration: none;
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
padding: 10px 10px 10px 10px; /* padding: 10px 20px 10px 20px; */
margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */
}

#navbar a:hover{
background: url('images/headerBarBgHover.png') repeat-x center #999999;
display:inline-block;
color: #222;
text-decoration: underline;
padding: 10px 10px 10px 10px; /* padding: 10px 20px 10px 20px; */
}

form{
padding: 0px;
margin: 0 auto;
}

.headerBar{
background: url('images/headerBarBg.png') repeat-x center;
text-align: center;
}

.headerSpace{
height: 150px;
background: #999999;
}

.widthLimiter{
width: 950px;
margin: auto;
}

.menuwidthLimiter{
width: 1150px;
margin: auto;
}

.content{
background: #EEEEEE;
text-align: center;
margin: auto;
}

.contentStyle{
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
padding: 10px;
height: auto !important;
height: 400px;
min-height: 400px;
margin: auto;
}


/*####################*/

.formWrapper{
width: 400px;
margin: auto;
border: 1px dashed #999;
padding: 5px;
text-align: left;
}


.innerformboxes{
float: left;
width: 275px;
padding: 5px;
border: 0px dashed #999;
}
.leftbookingleftfloat {
float: left;
width: 295px;
padding-right: 10px;
text-align: left;
border: 0px dashed #999;
}
.rightbookingleftfloat {
float: left;
width: 295px;
text-align: left;
border: 0px dashed #999;
}


.subHeader{
font-weight: bold;
text-decoration: underline;
}

.field{
padding: 15px 0px 0px 5px;
}
.emptyfield{
padding: 15px 0px 0px 5px;
color: #FF0000;
font-weight: bold;
}


.value{
padding: 5px 0px 3px 10px;
}

.other{
padding: 5px 0px 3px 0px;
text-align: center;
}

/*### Manager ###*/

.passengerList{
padding: 5px;
}

.passengerLinks{
padding-top: 3px;
}

.passengerEdit{
color: #090;
}

.passengerDel{
color: #900;
cursor: pointer;
}

.passengerAddress{
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}


/*### Form ###*/
.results{
display: none;
min-width: 200px;
width: auto !important;
max-height: 75px;
height: auto !important;
height: 75px;
overflow: auto;
position: absolute;
background: #EEEEEE;
border: 1px solid #000;
}






legend {
font-weight: bold;
}




.addressFieldset { text-align: left; padding: 15px; margin: 20px 0px 0px 0px; }
.addressIndent { text-align: left; border: 0px dashed #000; }
.addressHeader { line-height: 30px; font-size: 12px; font-weight: bold; border: 0px dashed #000; }
.addressxline { margin: 20px 0px 20px 0px; padding: 0; width: 140px; background: url(images/bg1.gif) repeat-x center left; height: 2px; font-size: 2px; border: 0px dashed #000; }

</style>

</head>
<body>

<div class="headerBar">
<div class="menuwidthLimiter">
<ul id="navBar">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Member Home</a> </li>
</ul>
</div>
</div>

<div class="headerSpace">

</div>

<script>
function getContacts(searchTerm) {
var xmlhttp;
var searchTerm = searchTerm.replace(/ +(?= )/g,'');

if(searchTerm.length < 1) { document.getElementById('results').style.display='none'; return false; }

document.getElementById('results').style.display='block';

if(window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
if(xmlhttp.responseText.indexOf("No results returned")!=-1){
document.getElementById('passengerID').value='0';
document.getElementById('results').style.display='none';
} else {
document.getElementById('results').innerHTML=parseScript(xmlhttp.responseText);
}
}
}

xmlhttp.open("GET","getResults.php?type=name&search="+searchTerm,true);
xmlhttp.send();
}

/*###############################*/

function getAddresses(searchTerm,element,element1) {
var xmlhttp;
var searchTerm = searchTerm.replace(/ +(?= )/g,'');

if(searchTerm.length < 1 || !document.getElementById('passengerID').value) { document.getElementById(element).style.display='none'; return false; }

document.getElementById(element).style.display='block';

if(window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(element).innerHTML=parseScript(xmlhttp.responseText);
}
}

xmlhttp.open("GET","getResults.php?type=address&search="+searchTerm+"&element="+element+"&element1="+element1+"&cid="+document.getElementById('passengerID').value,true);
xmlhttp.send();
}

/*###############################*/

function hide(element) {
setTimeout("document.getElementById('"+element+"').style.display='none'",250);
}

function setPassenger(contact,name,email,mobile) {
document.getElementById('passengerID').value=contact;
document.getElementById('passengerName').value=name;
document.getElementById('passengerEmail').value=email;
if(mobile.length > 1) {
document.getElementById('passengerMobile').value=mobile;
}
}

function setAddress(address,element) {
document.getElementById(element).value=address;
}

function copyAddress() {
document.getElementById('pickupAddr2').value=document.getElementById('pickupDrop1').value;
document.getElementById('pickupDrop2').value=document.getElementById('pickupAddr1').value;
}

/*###############################*/

function parseScript(_source) {
var source = _source;
var scripts = new Array();

// Strip out tags
while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
var s = source.indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.indexOf("</script", s);
var e_e = source.indexOf(">", e);

// Add to scripts array
scripts.push(source.substring(s_e+1, e));
// Strip from source
source = source.substring(0, s) + source.substring(e_e+1);
}

// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
eval(scripts[i]);
} catch(ex) {
window.execScript(scripts[i]);
}
}

return source;
}
</script>

<div class="content">
<div class="widthLimiter contentStyle">
<div class="formWrapper" style="width: 600px;">









<!-- start formwrapper -->
<form method="POST" action="booking.php">
<div class="rightbookingleftfloat">
<fieldset><legend><em style="text-decoration: underline;">Passenger Info</em></legend>
<div class="smallinnerformboxes">
<ul>
<li class="field"> Passenger Name * </li>
<li class="value">
<input type="text" autocomplete="off" name="passengerName" id="passengerName" value="" style="width: 200px;" onKeyUp="getContacts(this.value);" onBlur="hide('results');"><input id="passengerID" name="passengerID" type="hidden" value="0"><br><div class="results" id="results"></div> </li>
<li class="field"> Passenger E-mail Address </li>
<li class="value"> <input type="text" autocomplete="off" name="passengerEmail" id="passengerEmail" value="" style="width: 200px;"> </li>
<li class="field"> Passenger Mobile </li>
<li class="value"> <input type="text" autocomplete="off" name="passengerMobile" id="passengerMobile" value="" style="width: 200px;"> </li>
</ul>
</div>
</fieldset>
</div>
<br style="clear:both">
<br>
</form>
<!-- end formwrapper -->








</div>
</div>
</div>
<br style="clear:both;">

</body>
</html>



getResults.php


<?PHP session_start();
include('includes/Air-SeaPortArray.php');

$seaportArray = implode('||',$seaportArray);
$airportArray = implode('||',$airportArray);

$portArray = array($seaportArray,$airportArray);
$portArray = implode('||',$portArray);


if(isSet($_SESSION['FM_user']) && isSet($_GET['search']) && isSet($_GET['type']) && $_GET['type'] == 'name') {

include('includes/connection.php');
$searchTerm = mysql_real_escape_string(trim($_GET['search']));

if(!$searchTerm) {
//echo '<div style="padding: 0px;">';
//echo 'No results returned...';
//echo '</div>';
} else {
$searchContacts = mysql_query("SELECT * FROM contacts WHERE fullname LIKE '%$searchTerm%' ORDER BY fullname");
if(mysql_num_rows($searchContacts)) {
while($contact = mysql_fetch_assoc($searchContacts)) {
echo '<div style="padding:5px; cursor:pointer;" onClick="setPassenger(\'',$contact['contact_id'],'\',\'',$contact['fullname'],'\',\'',$contact['email'],'\',\'',$contact['mobile'],'\');">',$contact['fullname'],'</div>';
}
} else {
//echo '<div style="padding: 0px;">';
//echo 'No results returned...';
//echo '</div>';
}
}

} else if(isSet($_SESSION['FM_user']) && isSet($_GET['search']) && isSet($_GET['type']) && isSet($_GET['cid']) && $_GET['type'] == 'address') {

include('includes/connection.php');
$contactID = (int)$_GET['cid'];
$searchTerm = mysql_real_escape_string(trim($_GET['search']));

if(!$searchTerm) {
//echo '<div style="padding: 0px;">';
//echo 'No results returned...';
//echo '</div>';
} else {
$searchContacts = mysql_query("SELECT addresses FROM contacts WHERE contact_id = $contactID");
if(mysql_num_rows($searchContacts)) {
while($contact = mysql_fetch_assoc($searchContacts)) {
$fullArray = array($portArray,$contact['addresses']);
$fullArray = implode('||',$fullArray);
$addresses = explode('||',$fullArray);
$thisCount = 0;
//echo '<div style="border-bottom:1px solid #000;padding:1px;"></div>';
foreach($addresses AS $address) {
if(strstr(strtolower($address),strtolower($searchTerm))) { $thisCount++;
$results .= '<div style=" padding: 2px 0px 2px 0px;cursor:pointer;" onClick="setAddress(\''.$address.'\',\''.$_GET['element1'].'\');"> '.$address.' </div><div style="border-bottom:1px solid #000;padding:1px;"></div>';
}
}
}

if($thisCount == 0) {
if($results) {
echo $results;
}
exit;
}
if($results) {
echo '<div style="padding: 5px;">';
echo $results;
echo '</div>';
}
} else {
$addresses = explode('||',$portArray);
$result = '';
foreach($addresses AS $address) {
if(strstr(strtolower($address),strtolower($searchTerm))) { $thisCount++;
$results .= '<div style=" padding: 2px 0px 2px 0px;cursor:pointer;" onClick="setAddress(\''.$address.'\',\''.$_GET['element1'].'\');"> '.$address.' </div><div style="border-bottom:1px solid #000;padding:1px;"></div>';
}
}

if($thisCount == 0) {
//echo '<div style="padding: 0px;">';
//echo 'No results returned...';
//echo '</div>';
} else {
if($results) {
echo '<div style="padding: 5px;">';
echo '<div style="border-bottom:1px solid #000;padding:1px;"></div>';
echo $results;
echo '</div>';
}
}
}
}

} else if(isSet($_GET['search']) && isSet($_GET['type']) && $_GET['type'] == 'address') {

$addresses = explode('||',$portArray);
$results = '';
$thisCount = 0;

$searchTerm = trim($_GET['search']);

if(!$searchTerm) {
//echo '<div style="padding: 0px;">';
//echo 'No results returned...';
//echo '</div>';
} else {
foreach($addresses AS $address) {
if(strstr(strtolower($address),strtolower($searchTerm))) { $thisCount++;
$results .='<div style=" padding: 2px 0px 2px 0px;cursor:pointer;" onClick="setAddress(\''.$address.'\',\''.$_GET['element1'].'\');"> '.$address.' </div><div style="border-bottom:1px solid #000;padding:1px;"></div>';
}
}
if($thisCount == 0) {
//echo '<div style="padding: 0px;">';
//echo 'No results returned...';
//echo '</div>';
} else {
if($results) {
echo '<div style="padding: 5px;">';
echo '<div style="border-bottom:1px solid #000;padding:1px;"></div>';
echo $results;
echo '</div>';
}
}
}

} else {
header('Location: index.php');
}
?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum