I managed to add a link to the right of the jQuery autocomplete items, using the following code:
function onClientSelect(event, ui) {
// My handling code goes here
event.preventDefault();
}
$("#mypage input[name='client']").autocomplete({
minLength: 1,
appendTo: $(this).parent(),
source: '/filter_client/',
select: onClientSelect,
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
My server returns element label in this format:
<div class="ac-item-lb">My Item Label</div>
<a class="ac-item-a" href="/url_to_go_to/" target="_blank">View Detail</a>
What I want to do is to open the link in a new tab when I click on 'View Detail', which clicking any other area executes onClientSelect just like normal. However, currently left-clicking on the link also executes onClientSelect
. The only way to open the link is to click the middle wheel or right mouse button and select 'open in new tab'.
I tried attaching a click event handler on the link with event.stopImmediatePropagation() but that doesn't seem to work. Does anyone have any idea how to fix this?
One way to do it is by defining a custom
select
function and by not using an<a>
for the linksHTML:
JS:
JSFIDDLE.