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

Archivolt

you are right, it didn't work fixed : jsfiddle.net/fJ22W/2 – Archivolt

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.

Fasces

OH! It works. I had already see this option but i was missing an bracket! Thanks Chao, you saved my day! What do you mean about validation around the url? I think i will keep this solution and just control at the top of my destination page that the argument is valid. What do you think? – Archivolt

By validation I just mean make sure that ui.item.url has a value, that's it's a valid URL etc, just in case somehow you get some bad data in there. – Fasces