Loading ...
Sorry, an error occurred while loading the content.

Need help with AJAX autosuggest textfield and JavaScript events

Expand Messages
  • Neil
    Hello, I m kinda a newbie when it comes to AJAX but I have just completed my first Autosuggest text field for a website that I am working on. You can see an
    Message 1 of 1 , Jul 10, 2010
    • 0 Attachment
      Hello,
      I'm kinda a newbie when it comes to AJAX but I have just completed my first Autosuggest text field for a website that I am working on. You can see an example of it here:



      http://www.joshuaneil.com/autosuggest/autosuggest.php



      It will display a list of US states when you type in a letter to the text box. I would suggest you use the letter `M' as it is the best example.

      So far everything is working well but the next step I am having problems with. I NEED TO BE ABLE TO SELECT ONE OF THE STATES WITH EITHER THE ARROW KEYS OR MOUSE CLICK AND HAVE THE SELECTED STATE SHOW UP IN THE TEXT FIELD.



      I know this can be accomplished by using JavaScript events but I am uncertain of how to go about doing this..??? if anyone has any suggestions on how I can accomplish this I would deeply appreciate the info! THANKS EVERYONE FOR YOUR ASSISTANCE!



      I am using the following files for this example:



      autosuggest.php

      lib/ajax_framework.js

      lib/search.php

      lib/config.php



      I have included all the code that is in the four files listed aboveĀ…



      // autosuggest.php code is below



      <!-- AJAX AUTOSUGGEST SCRIPT -->

      <script type="text/javascript" src="lib/ajax_framework.js"></script>



      <style type="text/css">

      /* ---------------------------- */

      /* CUSTOMIZE AUTOSUGGEST STYLE */

      #search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px; border:solid 1px #999999;}

      #results{width:260px; border:solid 1px #DEDEDE; display:none;}

      #results ul, #results li{padding:0; margin:0; border:0; list-style:none;}

      #results li {border-top:solid 1px #DEDEDE;}

      #results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}

      #results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;}

      #results li a:hover{background:#FFFFCC;}

      #results ul {padding:6px;}

      </style>

      <div id="search-wrap">

      <h1></h1>

      <input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>

      <div id="results"></div>

      </div>







      ajax_framework.js code is below





      /* ---------------------------- */

      /* XMLHTTPRequest Enable */

      /* ---------------------------- */

      function createObject() {

      var request_type;

      var browser = navigator.appName;

      if(browser == "Microsoft Internet Explorer"){

      request_type = new ActiveXObject("Microsoft.XMLHTTP");

      }else{

      request_type = new XMLHttpRequest();

      }

      return request_type;

      }



      var http = createObject();



      /* -------------------------- */

      /* SEARCH */

      /* -------------------------- */

      function autosuggest() {

      q = document.getElementById('search-q').value;

      // Set te random number to add to URL request

      nocache = Math.random();

      http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);

      http.onreadystatechange = autosuggestReply;

      http.send(null);

      }

      function autosuggestReply() {

      if(http.readyState == 4){

      var response = http.responseText;

      e = document.getElementById('results');

      if(response!=""){

      e.innerHTML=response;

      e.style.display="block";

      } else {

      e.style.display="none";

      }

      }

      }







      config.php code is below (this is just the DB connection stuff)



      <?php

      // REQUIRED! Parameters to connecto to your DB

      // CHANGE ONLY $db_host, $db_name, $username, $password

      $db_host="hostname";

      $db_name="somedatabase";

      $username="someuser";

      $password="topsecret";



      // DON'T CHANGE THE FOLLOWING CODE!

      $db_con=mysql_connect($db_host,$username,$password);

      $connection_string=mysql_select_db($db_name);

      mysql_connect($db_host,$username,$password);

      mysql_select_db($db_name);

      ?>





      search.php code is below



      <?php

      // ---------------------------------------------------------------- //

      // DATABASE CONNECTION PARAMETER //

      // ---------------------------------------------------------------- //

      // Modify config.php with your DB connection parameters or add them //

      // directly below insted of include('config.php'); //



      include('config.php');





      // ---------------------------------------------------------------- //

      // SET PHP VAR - CHANGE THEM //

      // ---------------------------------------------------------------- //

      // You can use these variables to define Query Search Parameters: //



      // $SQL_FROM: is the FROM clausule, you can add a TABLE or an //

      // expression: USER INNER JOIN DEPARTMENT... //



      // $SQL_WHERE is the WHER clausule, you can add an table //

      // attribute for ezample name or an //





      $SQL_FROM = 'states';

      $SQL_WHERE = 'statename';



      ?>

      <?php

      $searchq = strip_tags($_GET['q']);

      $getRecord_sql = 'SELECT * FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE "'.$searchq.'%"';

      $getRecord = mysql_query($getRecord_sql);

      if(strlen($searchq)>0){

      // ---------------------------------------------------------------- //

      // AJAX Response //

      // ---------------------------------------------------------------- //



      // Change php echo $row['name']; and $row['department']; with the //

      // name of table attributes you want to return. For Example, if you //

      // want to return only the name, delete the following code //

      // "<br /><?php echo $row['department'];></li>"//

      // You can modify the content of ID element how you prefer //

      echo '<ul>';

      while ($row = mysql_fetch_array($getRecord)) {?>

      <li><a href="#"><?php echo $row['statename']; ?></a></li>

      <?php }

      echo '</ul>';

      ?>

      <?php } ?>
    Your message has been successfully submitted and would be delivered to recipients shortly.