Question

I’m stumped with this one, I’ve been at it hours, trying to get jQuery autocomplete to go to another page on the site when an item is clicked in the suggestions list.

Anyone know how to do this? Here is my code :

$(':input[data-autocomplete]').autocomplete({
    source: $(':input[data-autocomplete]').attr("data-autocomplete"),
    delay: 0,
    select: function (event, item) {
        //window.location.replace("http://www.example.com/Profile/Details/1");// Works but totally unacceptable, browser history lost etc.. 
        //alert("Item Clicked"); //Fires Ok
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    var MyHtml = '<a id="ItemUrl" href="/Profile/Details/' + item.PartyId + '"' + ">" +
                     "<div class='ac' >" +
                     "<div class='ac_img_wrap' >" +
                     '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                     "</div>" +
                     "<div class='ac_mid' >" +
                     "<div class='ac_name' >" + item.value + "</div>" +
                     "<div class='ac_info' >" + item.info + " PartyId :" + item.PartyId + "</div>" +
                     "</div>" +
                     "</div>" +
                     "</a>";
    return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
};

As you can see I have used custom HTML in the _renderItem event, my custom HTML creates an anchor tag with the id passed in from the source, this looks ok, the link is formed correctly in the browser bottom left corner (I’m using Chrome)

<a href='/Profile/Details/id' >some other divs & stuff</a>   

The problem is that when I click the link nothing happens, I have tried using the select event but item is null so can’t get item.PartyId to force a manual jump.

How can I get the click event working?

Answer 1

It might late to answer it, but I have done this with the following code:

$(document).ready(function() {
    $('#txtSearch').autocomplete({
        minLength: 3,
        source: "handlers/SearchAutoComplete.ashx?loc=" + $('#hfLocation').val(),
        select: function(event, ui) {
            doSearch(ui.item.label, ui.item.city);
        }
    });
});

function doSearch(term, location) {
    window.location.href = 'Search.aspx?q=' + term + '&loc=' + location;
}