title: Jquery auto complete text box ajax call issue
body: <p>I am building an autocomplete text field with jquery and ajax like the google search bar. The ajax call is supposed to be fired on keyup but it is not working. Note that when I input a variable manually in my php file it is working properly. So the problem must come from my ajax "call" but I can't figure it out. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;input id="recherche" type='text' placeholder="je recherche"&gt;
  &lt;div id="resultat"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>$('#recherche').keyup(function() {
      var recherche = $(this).val();
      var ajaxData = "recherche=" + recherche;
  
      $.ajax({
          type: "POST",
          url: "php/reherche.php",
          data: ajaxData,
          success: function(retour) { // si l'appel a bien fonctionné
              $('#resultat').html(retour);
  
          }
      });
  
  });
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#resultat{
      width:300px;
      height:300px;
      border:1px solid blue;}
  </code></pre>
  
  <p>My PHP:</p>
  
  <pre><code>&lt;?php
  header('Content-Type: text/html; charset=utf-8');
  require("connect.inc.php");
  mysql_set_charset('utf8');
  
  $recherche = mysql_real_escape_string($_POST['recherche']);
  
  $result = mysql_query("SELECT LOC_VKUP FROM T_LOC WHERE LOC_VKUP LIKE '%$recherche%'");
  
  while($row=mysql_fetch_assoc($result)){
      echo '&lt;div id="result"&gt;'.$row['LOC_VKUP'].'&lt;/div&gt;'; 
  }
  ?&gt;
  </code></pre>