Categorized Autocomplete Data

[thara]

Hello..

 

 

In my search bar I used jquery auto complete function to display related result for the searching keyword. It is working perfectly and now I'm looking for a way to increase the usability of it..

 

this is so far from my database file...

 

<?php
require_once('database.php');

if(isset($_POST['queryString'])) {

   $queryString = $dbc->real_escape_string($_POST['queryString']);

   if(strlen($queryString) >0) {
       $q = "SELECT keyword 
               FROM (
                   SELECT tname AS keyword FROM t
                   UNION
                   SELECT sname AS keyword FROM sub
                   UNION
                   SELECT cname AS keyword FROM c
                   UNION
                   SELECT iname AS keyword FROM i
               ) s
             WHERE keyword LIKE '%$queryString%' 
             LIMIT 10";

       $r = mysqli_query ( $dbc, $q);

       if($q) {
           while ($row = mysqli_fetch_array($r, MYSQL_ASSOC)) {
               echo '<li onclick="fill(\''.$row['keyword'].'\');">'.$row['keyword'].'</li>';
           }
       } else {
           echo 'ERROR: There was a problem with the query.';
       }
   } else {


   }
} else {
   echo 'There should be no direct access to this script!';
}
?>

 

This is from my index page with jquery

 

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
 function lookup(inputString) {

  if(inputString.length == 0) {
   $('#suggestions').hide();
  } else {
   $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
 if(data.length >0) {
  $('#suggestions').show();
  $('#autoSuggestionsList').html(data);
 }
   });
  }
 }

 function fill(thisValue) {
  $('#inputString').val(thisValue);
  setTimeout("$('#suggestions').hide();", 200);
 }
</script>

 

My problem is auto complete box display all values all together in this case subjects, tutor names, institutes names, city etc. So I'd like the results from the autocomplete function to be separated into categories. For example, if a user starts typing "an", the autocomplete will show 4 categories with items in each. if a user wants to select one of the items in the list under category "Subject".

 

can any body tell me how can I do this?

 

any comments are greatly appreciated.

Thank you.