How to Link Pages in jQuery Autocomplete on Click or Select

I assume that your codes will return a JSON array, either local or remote, which contains additional element url like this:

[{
  "value" : "Dove",
  "url" : "/birds/dove.html"
}, {
  "value" : "Robin",
  "url" : "/birds/robin.html"
}]

You must have select event in your Autocomplete function, in which, you assign the value of ui.item.url to window.location.href (like the red paragraph below):

$(function() {
  ...
  $("#bird").autocomplete({
    source : function(request, response) {
      $.getJSON("search.php", {
        query : request.term
      }, response);
    },
    minLength : 2,
    select : function(event, ui) {
      event.preventDefault();
      window.location.href = ui.item.url;
    }

  });
  ...
});

That's it. If you'd like to display images in every listed item, you may refer to my post: How to Display jQuery Autocomplete Images in Search Results.

Leave a Reply

Your email address will not be published. Required fields are marked *