Help with a AJAX PHP and MYSQL Live Search!

Question

i am trying to create a Ajax live search for my website. I currently can query the database for titles and display them under my search (See Fig 1.0) however i need to make them selectable so that when you do select them, it will set the input value to that title, very much like on wikipdia search Wikipedia Search. The wikipedia example is basicly what I am looking for. Any help would be great.

Thanks, CHL UK

My Search so far http://www.webquark.co.uk/Search.bmp

Fig 1.0

CODE: PHP DB search

    <?

  // Get value coming from request
  $search = mysql_real_escape_string ($_GET['search']);


  // Connect to DB
  mysql_connect("localhost", "****", "****") or die(mysql_error()) ;
mysql_select_db("*****") or die(mysql_error()) ;
 $result = mysql_query("SELECT * FROM dbArticle WHERE title LIKE '%$search%' OR type LIKE '%$search%'  OR username LIKE '%$search%'");
  while($row = mysql_fetch_array($result))
  // Check if name exists in table
  if (!empty($row['title'])) {
  echo "".$row['title']."<br />";}
  if (!empty($row['type'])) {
  echo "".$row['type']."<br />";}
  if (!empty($row['username'])) {
  echo "".$row['username']."<br />";}
   //Close connection
  mysql_close();


?>

CODE:PHP Search Input

<div id="navSearch">
  <form method="post" action="index.php?pageContent=search">
  <li><input type="text" maxlength="30" size="22" name="search" onkeyup="send_requestSearch(this);"/> </li>
  <li><input type="submit" value="Search" name="submit"/></li>
  <div class="liveSearch" id="livesearch"></div>
  </form>

If you need to see my Javascript let me know.

Answer 1

The control you are looking for is called a suggester. Try searching google for "ajax suggestion". You will find a few tutorials on how to do it. Here's one: link

Answer 2

You probably need to make each returned search result JavaScript-enabled so that with an OnClick it fills its value into the input text. Having the text-input element identified with an id-property would help targeting it a bit. I'm sure that you can figure out the rest. I've started to like JQuery with exactly these kinds of tasks.

You also probably want to have the results to have the CSS rule "cursor: pointer" so that it looks like a clickable item.