How to redirect to another page using jQuery Autocomplete item click

Question

I am at a dead end with this, I was at this hour trying to get jQuery autocomplete to go to another page on the site when the item clicked in the list of offers.

Does 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 used my own HTML in the _renderItem event, my custom HTML creates a binding with the identifier passed from the source, it looks fine, the link is correctly formed in the lower left corner of the browser (I use Chrome)

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

The problem is that when I click the link, nothing happens, I tried to use the select event, but the element is null, so I can not force item.PartyId force manual transition.

How can I make the click event work?

Answer 1

It may be too late to answer, but I did it 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; } 

Answer 2

After several days of dizziness (not smoothing), I came 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 problem was (event, element) should be (event, ui) and get the value of the element that you are using ui.item.PartyId (in my case, PartyId is declared in the source: above)

So, in my original form, I had two html-inputs 1-hidden identifier, 2-Submit and, as you can see in the select function: above, I set the identifier and ran submit (so now the user just selects the element and they go to the controller that runs RedirectToView and NOT this code, since it does not seem to be correct to use the location in this instance

Hope this saves some, as jQuery autocomplete docs don't make this too clear.