jQueryUI Autocomplete with clickable results

Question

I've tried looking for similar cases and I found some but each time, the code is slightly different and I don't manage finding the solution...

I'm using jQuery Autocomplete on my website whith datas from a mysql database.
The results are sorted by categories to display both products and brands in the same input
So I naturaly pasted the example from their website on mine and it works fine!
The generated json look like this

{"label":"Product 1","url":"product.php?id=1","category":"Products"}

My only problem is that I would like results to be clickable. So when the user clicks on a result, an other page loads instead of the default behaviour which is filling the input with the data.

I have created a demo on jsfiddle so you can see what's happening
http://jsfiddle.net/fJ22W (datas are contained in the js here)

Your help is more than welcome, I guess this is not such a big deal but my poor skills in jQuery prevents me to resolve that problem...

Bertrand

Answer 1

Use the select event:

$( "#search" ).catcomplete({
        source: 'suggest_zip.php',
        select: function( event, ui ) {
            window.location = ui.item.url;
        }
    });

Obviously you'll want to have some validation around the url etc.

For what it's worth I'd also recommend using the default autocomplete widget and using the events and options rather than trying to inherit from it. Your code will be much cleaner and less chance of odd bugs.