jQuery UI Autcomplete - hyperlink results

Question

By default the jQuery U Autocomplete produces a list of results, upon clicking on a result it will populate the text field with the clicked result text.

I would like to change this behaviour, so that when clicking on a result it will take you to that result's page. To generate the hyperlink I can pass in the ID of the result.

I'm using PHP JSON to bring back the resultset:

$return_arr = array();

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['value'] = $row['name'];

    array_push($return_arr, $row_array);
}

echo json_encode($return_arr);

And here is my current jQuery:

$(function() {
$("#searchcompany").autocomplete( {
    source: "companies.php",
    minLength: 2
});
});

Answer 1

Think you need to hook into the select event and supply your own function.

See here for more information.

Supply a callback function to handle the select event as an init option.

$("#searchcompany").autocomplete( {
  source: "companies.php",
  minLength: 2,
  select: function(event,ui) { //Do your code here...
                               event.preventDefault();  
                             }
});

or Bind to the select event by type: autocompleteselect.

    $( "#searchcompany" ).bind( "autocompleteselect", function(event, ui) {
      ...
    });

and to change the matching items to include a hyperlink that can be clicked use the Open event :-

open: function(event, ui) { $( 'li.ui-menu-item a').each( function() { 
                                                    var el = $(this); 
                                                    el.attr('href', el.html()); 
                                                    }  
                                                    ); } 

This will add an href="[item value]" to each <a> element.

Edit: The code below will allow you to use the open event to change the items to include a href so they show the link in the window and when clicked they will take you to the specified location :-

open: function(event, ui) { 
      $("ul.ui-autocomplete").unbind("click");

      var data = $(this).data("autocomplete");          

      for(var i=0; i<=data.options.source.length-1;i++)
      {
        var s = data.options.source[i];
        $("li.ui-menu-item a:contains(" + s.value + ")").attr("href", "directory/listing/" + s.id);
      }

    } 

Using this also means that you don't need to use the select event.