CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-autocomplete
LenPopLilly
LenPopLilly

Reputation: 1227

How to redirect to another page with jQuery Autocomplete item click

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?

Upvotes: 6

Views: 21477

Answers (2)

LenPopLilly
LenPopLilly

Reputation: 1227

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.

Upvotes: 0

Soofi
Soofi

Reputation: 106

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

Upvotes: 4

Related Questions