jQuery UI Autocomplete Search

Question

I want to use jQuery UI autocomplete so the user can search for items.

I have a list of products that I need to make into JSON (or just include them in JavaScript like jQuery UI's demo has) but is there a way when the user selects an item, it redirects to the URL?

In jQuery UI's demo, they have:

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});

Where can I add a URL for each item so when the user selects it, it'll redirect the page?

Answer 1

If you pass an object with a property named value, then jquery will use that as the display value. You can then use the select method on the autocomplete to handle the event:

var availableTags = [
    {value: "ActionScript", url:"http://www.google.com?q=ActionScript"},
    {value: "jquery", url:"http://www.google.com?q=jquery"}
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
        select:function(event, ui) {
        window.open(ui.item.url);        
    }
    });

Example fiddle: http://jsfiddle.net/9qePM/