JQuery AutoSuggest

During the process of developing an application for work the other day, I decided that a normal Javascript enabled interactive menu wasn’t enough for what I wanted. The hunt for an attractive auto suggestion, quick search tool was on.

After many searches and deliberations my focus was set on the JQuery AutoSuggest script from BrandSpankingNew. The first issue I discovered was the PHP and ability to generate the correct array for the autosuggest to read from. The vast amount of questions on the website all point to one thing, no-one knows, or no-one wanted to share how to correctly read and loop from MySQL and create the array in PHP for autosuggest.

Well I am pleased to say, I did it. As comments are closed on BSN I would like to leave this on my web site for everyone searching.
Here goes.

Firstly with test.php (how autosuggest ships) add your connection details to MySQL database. Simple stuff if your used to PHP, if not try this:

$dbhost = ‘host’;
$dbuser = ‘user’;
$dbpassword = ‘password’;
$mysqlLink = mysql_connect($dbhost,$dbuser,$dbpassword);
global $mysqlLink;
mysql_select_db(‘yourDatabase’,$mysqlLink) or die(header("Location: message.php" ));
$query = "SELECT * FROM `table` LIMIT 5 LIKE %’entry’";
$result = mysql_query($query);

Next you need to blank your ARRAY, default it to 0 if you like, this is how you would do it.

$aUsers = Array();
$aInfo = Array();
$aId = Array();
$aSid = Array();

You will see I have added another ID called SID, this could be anything else you wanted to pull back from the database and use later within the results.

Next create your ARRAY, here we need to loop the results and build the array in the format autosuggest is looking for.

$row = "";
while($row = mysql_fetch_array($result))
{
        $aId[] = $row["id"];
        $aSid[] = $row["subjectYear"];
        $aUsers[] = $row["subjectName"];
        $aInfo[] = $row[‘courseLevel’];
}

As you can see we again we have to reset $row to 0, created a while loop with our MySQL connection results, created earlier, and built an array associated with our variables that autosuggest requires.
Thats all you need to do to fetch variable database driven data for autosuggest to suggest from!
But wait, what if you wanted to pass more information to the generated HTML, or form that you are using, so that when you click submit it passes information along the query string to go to a variable page or other use. Well, you will need to edit the line controlled via the variable $aResults.

$aResults[] = array(
     "id"=>($aId[$i]),
    "sid"=>($aSid[$i]) ,
    "value"=>htmlspecialchars($aUsers[$i]),
    "info"=>($aInfo[$i]) );

As you can see, I have added my extra id $aSid into the equation. This will build the array string for JSON with all the information I need to created a query sting!
Next you need to make sure that this information is inserted via the javascript into the correct position, to do this, edit the autosuggest.js around line 315 and simply add you variables:

this.aSug.push(  { ‘id’:jsondata.results[i].id, ‘sid’:jsondata.results[i].sid, ‘value’:jsondata.results[i].value, ‘info’:jsondata.results[i].info }  );

Do you see my SID? Next the callback: function within the options script held on the HTML page, just add in your variable data, I wanted to add in the SID to a hidden field on my form, so that the query string would pass two id’s along the URL to open a dynamically generated page.

callback: function (obj) { document.getElementById(‘pid’).value = obj.id, document.getElementById(‘sid’).value = obj.sid, document.qSearch.submit();}

I also added this line: document.qSearch.submit(); when the user clicks on one of the results, the form gets submitted and jumps to the correct page, much like the quick search on Facebook.

Lesson over. Hope that you found this useful? Let me know if you have any other suggestions, and thanks would be kindly accepted on this blog!

If you liked this you might want to head over to the Facelist jQuery plugin I have created.

Posted On: Wednesday, January 16th, 2008 @ 6:13 pm by Ian Tearle

---

0 Comments

There are no comments on this entry. You should add one below.