How to redirect to another page with jQuery Autocomplete item click

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?

Revelationist

why dont you use location.href – Reinhardt

So use window.location.href instead of window.location.replace. – Whorton

Ok just tried that, location.href doesn't work, its almost like autocomplete is stopping it as the alert message doesn't fire too. – Revelationist

Can you post an example on jsFiddle? – Whorton

Never actually used it before but will have a go, thanks for your patience. – Revelationist

@LillyPop: Not sure if this helps, but you really want item.item in your select handler. Also, setting location.href will redirect the page so you should never see the alert – Shadbush

Yeah, I spent two days finding it out, the docs aint too good for autocomplete, its actually (event, ui) then ui.item.val. I will post some working code later for completeness but thanks anyhow Andrew – Revelationist

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;
}

Bates

Answer 2

After a few days of head banging (not moshing kind) I've come up with the following:

$(':input[data-autocomplete]').autocomplete({
    source: $(':input[data-autocomplete]').attr("data-autocomplete"),
    delay: 0,
    select: function (event, ui) {
        var q = ui.item.PartyId;
        if (q != "") {
            $('#hidPID').val(q);
            $('#ac_submit').trigger('click');
        }
    }).data("autocomplete")._renderItem // -->>> the rest of the code same as above

The issue was (event, item) should have been (event, ui) and to get the value of the item you use ui.item.PartyId (in my case PartyId is declared in the source : above)

So on my original form I had two html inputs 1-hidden ID, 2-Submit & as you can see in the select : function above I set the ID & trigger the submit (so now the user just picks an item and off they go to the controller which performs the RedirectToView & NOT this code as it doesn't seem correct to use location in this instance)

I Hope this saves someone some time as the jQuery autocomplete docs dont make it too clear.

Revelationist