Geek asks and answers

JQueryUI autocomplete with interactive results

I tried looking for similar cases, and I found a few, but each time, the code is a little different, and I can not find a solution ...

I am using jQuery Autocomplete on my website with data from mysql database.
The results are sorted into categories to display both products and brands on the same input. So, of course, I inserted an example from my website into mine, and it works great!
The generated json looks like this:

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

My only problem is that I would like the results to be clickable . Therefore, when the user clicks on the result, another page loads instead of the default behavior, which fills the input with data.

I created a demo on jsfiddle so you can see what is happening http://jsfiddle.net/fJ22W (the data is here in js)

Your help is more than welcome, I think this is not such a big problem, but my poor jQuery skills do not allow me to solve this problem ...

Bertrand

+5
source share
1 answer

Use the select event:

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

Obviously, you will want to do some validation around the url, etc.

For this, I also recommend using the default autocomplete widget and using events and parameters, rather than trying to inherit it. Your code will be much cleaner and less likely to get odd errors.

+6
source

More articles:


All Articles