How to redirect to another page with jQuery Autocomplete item click
20,983
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;
}
Author by
LenPopLilly
Updated on August 09, 2020Comments
-
LenPopLilly almost 4 years
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?