How To Set Label And Value In jQuery UI Autocomplete

Lets say, we want to show an autocomplete field with different display text and the different raw value using jQuery UI autocomplete.

So what will we do. First we have to send our formatted data from the server side coding.
Lets take a look to an example:

Suppose we want an autocomplete field where we will type two charecters and
will show a list of related company names in the display but each will contain company’s link.

So we are going to return a string or JSON object( whatever you would like ) to our .js file. Here we’ll send the company name and the website link.
The returned string is stored in data.d ( in json format ).

success: function( data ) {
  response( $.map( data.d, function( item ) {
    return {
      label: item.companyName, // Set the display lebel for the searched list of company names which we're getting from server side coding.
      value: item.companyWebsite // Set the raw value of each shown items.
    }
  }));
}

Now once we will select any of the company items, it will show the company name in the field and will redirect to the company website.

select: function (e, u) {
  window.location.href = u.item.value; // on selecting a particular item, it'll redirect you to the url
},