title: AJAX form autofill suggestion
body: <p>I am trying to create an html form that uses AJAX to load database entries from a mysql database as the user types, so it suggests them to the user.</p>
  
  <p>I am new to AJAX and I am kind of stuck with something that probably is quite simple for more experienced people.</p>
  
  <p>I have this html text input:</p>
  
  <pre><code>&lt;form&gt;
      &lt;input  type="text" id="f" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This jQuery script:</p>
  
  <pre><code>$(function(){
  ajaxTest();
  })
  
  function ajaxTest(){
  $('#f').keyup(function(){
      $.ajax({
          url: 'getit.php',
          dataType: 'json',
          data: {'data' : this.value},
          success: function(response){
              for(var i = 0; i &lt; (response.rows*2); i = i+2){
              alert('The name is ' + response[i] + ' ' + response[i+1])
              }
              }
          })
      })
  }
  </code></pre>
  
  <p>And this php script:</p>
  
  <pre><code>//connect to database
  //get variables an sanitize
  $parameter = $_GET['data'];
  $parameter = mysql_real_escape_string( $parameter );
  
  //prepare and run query
  $query = "SELECT email , surname , address FROM users WHERE email LIKE '$parameter%'";
  $result = mysql_query($query);
  
  //start preparing response
  $seires = mysql_num_rows($result);
  $response = array('rows'=&gt;$seires);
  while($row = mysql_fetch_array( $result ) ) {
      array_push( &amp;$response , $row['onoma'] , $row['epwnimo'] );
      }
  echo json_encode($response);
  </code></pre>
  
  <p>This gets my job done, but I am wondering:</p>
  
  <p>1) Am I using any bad practices?</p>
  
  <p>2) Is there a smarter way to pass the data from the php script to the jQuery script?</p>
  
  <p>3) In html, what tag could I use to display the suggestions to the user? A p with an onclick function to fill the form perhaps or is there something better?</p>