Question

My autocomplete data comes in as such {“label”:”Apple iPhone 3G”,”values”:”293″}.. ect..
when a user clicks an autocomplete option i want to redirect them to the product page which is based on unique id values.
Ex. when iphone 3g is picked i want it to go to example.com/293
but currently it takes in the value of whatever is typed instead of what is selected.
So say i type in A and click iphone 4g, it will not store the correct value of the iphone 4g,
but instead will store the value of the first item thats begins with a. Or if i type in iphone and select iphone 4, it will save the value of the first iphone in the database

http://mogulcases.com/matt/search.php

How im storing the key values

$.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
    var self = this,
               currentCategory = "";

    $.each( items, function( index, item ) { 
      self._renderItem( ul, item );

      $("input[type=hidden][name=key]").val(item.values); 

    });

  }
});

How im grabbing the values

var searchcode = document.getElementById('key').value;

Answer 1

Why not just do something with the select event. i.e.

$( ".selector" ).autocomplete({
   select: function(event, ui) { 
    window.location = "http://example.com/" + ui.item.id //would send them to the page you want them to go if they click on this
  }
});

This way if a user selects something from the list you can just call the event from there and know that the item exists. And if they do not select it form the list it will perform the search when they click the search button or press enter.

You can even change the value on select the same way

$( ".selector" ).autocomplete({
   select: function(event, ui) { 
    $(".selector").val(ui.item.value); //I think Autocomplete does something like this automatically so may not be needed.
    //But you could do something like this
    $("input[type=hidden][name=key1]").val(ui.item.value); 
  }
});

Documentation can be found here