Binds links to the returned results for jQuery Autocomplete UI

Question

This code snippet is adapted from a jQuery tutorial





  
  
  jQuery UI Autocomplete - Default functionality
  
  
  
  
  



   Tags:

Which works well and generates options according to a given string.

Beside that, a page binds links to the returned results.

How do I implement this feature?

user_13669048 · Answer

You can simply use autoComplete select feature which will let you binds links to the returned results for autocomplete.

You also need to save your data like this below. So the URL of autocomplete words can be opened when clicked on the selection.

To open the search results we can use window.open this mean the url will be opened in new tab.

Working Demo: https://jsfiddle.net/09dtrk7L/2/

Run snippet below (Note: The url will not open here so you need to try the Demo link above. window.open is blocked by the snippet.)

$(function() {

  //Your autocomplete data
  var availableTags = [{
      value: "Google",
      url: "http://www.google.com/",
      label: "Google"
    },
    {
      value: "Example website",
      url: "http://www.google.com/",
      label: "Example website"
    },

  ];

  //Autocomplete
  $("#tags").autocomplete({
    source: availableTags,

    //Open window on select
    select: function(event, data) {
      window.open(data.item.url, '_blank');
    }
  });
});

.ui-menu-item-wrapper {
  text-decoration: underline;
}





  
  
  jQuery UI Autocomplete - Default functionality
  
  
  
  



   Tags:

Binds links to the returned results for jQuery Autocomplete UI

1 Answers