Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    how to use arrow keys with AJAX ?

    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?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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
    Code:
     
     
    <!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>

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    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...

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

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    ok, I've got an idea but need to see the actual html that is outputed. Post the html that code generates.

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    Post

    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
    Code:
    <!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
    Code:
    <?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');
      }
    ?>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •