My latest jQuery project, a bit of a baby really, I have been looking around for this functionality for a while now, finally found a version which is not entirely finsihed or fully functional.

If you use Facebook, you will see what I am trying to achieve here. When sending a mail in Facebook when you start typing into the recipient field you get a quicksearch list, click on a name and it inserts it into the input field similar to how Apple Mail displays its results, continue to enter names and you create a list of people each indiviually able to delete.

Well I have achieved this effect in jQuery, but need to develop it further to provide functional functionality.

So I played around with the code and managed to get some of it working, but I need help. I need the ability to have an ID of an item inserted into a hidden array, but the script will not pass in the second element of the array in a PHP script, rather it does, but then fails when you try to delete the item, it adds a comma into the ID tag and does not handle all spaces properly, thus fails.

There are a dozen support requests around, but if you want to help me out here, all comments gratefully recieved. You may download the zip file and have a go for yourself, but please do let me know if you get anywhere. Zip files here.

A project page has been created on the jQuery website at the following page Facelist.

Demo available at Facelist

Facelist by Ian Tearle, Theo Chakkapark, Xavier Domenech, Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Jörn Zaefferer is licensed under a Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.
Based on a work at www.iantearle.com.

Looking for the Facelist files? Links have been updated on this page, but please check out the official project page.

Firstly a big thank you to the original poster of this bug, Jamie Thomspon thank you very much, although it took me a while to find it, thus I am posting it here for reference use.

The issue being is that Safari has trouble with hide/show methods on elements when used by jQuery. The same bug has been reported about fadeIn/fadeOut methods also, although I have not experienced this.

The issue can be solved by the use of CSS. By applying CSS rules to the element, Safari appears to control the hide/show methods correctly.

// This fails in Safari
$(element).hide();
// Change it to this
 $(element).css('display','none');

I thought I may post this little hint at the woes of Internet Explorer. Whilst creating an application laden with Javascript, testing with Firefox, and the wonder that is Firebug, all seems well.
But then comes the dreaded IE game. For some reason my Javascript failed to do what it was supposed to do. That some reason ended up being a COMMA. yes my friends, a ,! trailing at the end of a function IE gives up when it thinks the script carries on and starts looking for the rest of the code, when it cant find it, IE will give up on Javascript all together.

So next time you are pulling your hair out, just check for those commas with nothing proceeding it. That will be what Internet Explorer is moaning about, pretty much guaranteed.

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.

I have fallen in love with a new Javascript Library. Gone are the days of prototype, I have found JQuery, which I have quickly learnt and begun to write my own custom variables.

OK so Prototype has the experience, the big guns behind one of the most popular Javascript Libraries around, but JQuery is so simple, you don’t have to borrow someone else’s good looking code, you can make your own. There is a growing library on the web too, with many good developers sharing their skills, like those over at Malsup with clever examples and the briefest but most helpful of code, they have enabled me to play with JQuery and make it work for me. My version Three of Media By will be heavy on JQuery, making use of the graphical interface rather than the technology, all the while making the site look GOOD.

The fear though; ‘is javascript a wise choice for web sites?’ My answer is why not? So many browsers have got their act together with regards to security, and more and more people are becoming aware of web 2.0, you just have to put CSS in your browser to see the abundant list of web 2.0 galleries, and standard compliant sites. Javascript libraries are for the future. They are compatible with everything, they render well even in IE, and they are accessible.

So spread the word, turn on your javascript, the future is now. Lets make the web the future, and make it look good.