title: How to use two autosuggest (ajax, PHP, Mysql) in a single page
body: <p>I used an autosuggest script (using jquery, ajax, php and mysql) in one of my pages and that worked perfectly.</p>
  
  <p>but when i tried to add the autosuggest for another Form (Text Input) on the same page i got a lot of errors, it displays the correct information but when i click them that fills the first input, i tried modifying some variable but now its not working at all for the second input.
  and im really new to JS, Jquery, Ajax ( never used that before ).</p>
  
  <p>Here's is the code of the page containing the inputs (Test.html).</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"&gt;
  &lt;/script&gt;
  &lt;script&gt;
  function suggest(inputString){
      if(inputString.length == 0) {
          $('#suggestions').fadeOut();
      } else {
      $('#country').addClass('load');
          $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
              if(data.length &gt;0) {
                  $('#suggestions').fadeIn();
                  $('#suggestionsList').html(data);
                  $('#country').removeClass('load');
              }
          });
      }
  }
  
  function fill(thisValue) {
      $('#country').val(thisValue);
      setTimeout("$('#suggestions').fadeOut();", 600);
  }
  </code></pre>
  
  <p>
     </p>
  
  <pre><code>#result {
  height:20px;
  font-size:16px;
  font-family:Arial, Helvetica, sans-serif;
  color:#333;
  padding:5px;
  margin-bottom:10px;
  background-color:#FFFF99;
  }
  #country{
  padding:3px;
  border:1px #CCC solid;
  font-size:17px;
  }
  .suggestionsBox {
  position: absolute;
  left: 0px;
  top:40px;
  margin: 26px 0px 0px 0px;
  width: 200px;
  padding:0px;
  background-color: #000;
  border-top: 3px solid #000;
  color: #fff;
  }
  .suggestionList {
  margin: 0px;
  padding: 0px;
  }
  .suggestionList ul li {
  list-style:none;
  margin: 0px;
  padding: 6px;
  border-bottom:1px dotted #666;
  cursor: pointer;
  }
  .suggestionList ul li:hover {
  background-color: #FC3;
  color:#000;
  }
  ul {
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#FFF;
  padding:0;
  margin:0;
  }
  
  .load{
  background-image:url(loader.gif);
  background-position:right;
   background-repeat:no-repeat;
  }
  
  #suggest {
  position:relative;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form id="form" action="#"&gt;
  &lt;div id="suggest"&gt;type a country: &lt;br /&gt;
    &lt;input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);"    onblur="fill();" class="" /&gt;
  
    &lt;div class="suggestionsBox" id="suggestions" style="display: none;"&gt; &lt;img   src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /&gt;
      &lt;div class="suggestionList" id="suggestionsList"&gt; &amp;nbsp; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="suggestcity"&gt;type a city: &lt;br /&gt;
    &lt;input type="text" size="25" value="" id="city" class="" /&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the code of my the autosuggest.php is </p>
  
  <pre><code>&lt;?php
  $db_host = '';
  $db_username = '';
  $db_password = '';
  $db_name = '';
  
  $db = new mysqli($db_host, $db_username ,$db_password, $db_name);
  
  if(!$db) {
         $db-&gt;set_charset("utf8");
      echo 'Could not connect to the database.';
  } else {
  
      if(isset($_POST['queryString'])) {
          $queryString = $db-&gt;real_escape_string($_POST['queryString']);
  
          if(strlen($queryString) &gt;0) {
              $db-&gt;set_charset("utf8");
              $query = $db-&gt;query("SELECT Ville FROM Villes WHERE Ville LIKE '$queryString%' LIMIT 10");
              if($query) {
              echo '&lt;ul&gt;';
                  while ($result = $query -&gt;fetch_object()) {
                      echo '&lt;li onClick="fill(\''.addslashes($result-&gt;Ville).'\');"&gt;'.$result-&gt;Ville.'&lt;/li&gt;';
                  }
              echo '&lt;/ul&gt;';
  
              } else {
                  echo 'OOPS we had a problem :(';
              }
          } else {
              // do nothing
          }
      } else {
          echo 'There should be no direct access to this script!';
      }
  }
  ?&gt;
  </code></pre>
  
  <p>So My question is, what should i change ( variables and functions etc... ) in the two pages  so i can use the autosuggest on the second input with the id="city" from another table on the same database.</p>
  
  <p>if you can help that would be wonderful, 
  i have been trying to modify whatever on the code for the last couple days and nothing worked.
  Thank you verry much</p>