Jquery AutoComplete - Add Links Equal to Original SelectBox value to DropDown List

Question

I'm trying to modify this example: http://jqueryui.com/demos/autocomplete/#combobox to parse a similar select list, in which hyperlinks are passed as values.

<select id="combobox">
<option value="/page1" title="Page1">Page1</option>
<option value="/page2" title="Page2">Page2</option>
<option value="/page3" title="page3">Page3</option>
<option value="/page4" title="Page4">Page4</option>
...

The effect desired is to activate the link to the corresponding page once a match has been made and the user clicks enter or simply when a user clicks the suggestion from the autocomplete list.

I've also tried to make the AutoComplete parse a simple link list instead of a select list but it seems too much of an hack to me, given my fresh jquery skills.

Any help will be appreciated. Thank you very much.

Answer 1

try adding onItemSelect callback to the autocomplete. something along the lines of

onItemSelect: function(v){
   window.location.href = v;
}

Answer 2

Use the autocomplete select event to navigate to the page

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

From the jQueryUI documentation:

Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.