javascript - ejemplo - jquery ui
Hacer<a> dentro de jQuery autocompletar cliqueable (5)
Logré agregar un enlace a la derecha de los elementos de autocompletado de jQuery, usando el siguiente código:
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);
};
Mi servidor devuelve la etiqueta del elemento en este formato:
<div class="ac-item-lb">My Item Label</div>
<a class="ac-item-a" href="/url_to_go_to/" target="_blank">View Detail</a>
Lo que quiero hacer es abrir el enlace en una nueva pestaña cuando hago clic en ''Ver detalle'', que al hacer clic en cualquier otra área se ejecuta en ClientSelect como de costumbre. Sin embargo, actualmente, al hacer clic con el botón izquierdo en el enlace también se ejecuta onClientSelect . La única forma de abrir el enlace es hacer clic en la rueda central o en el botón derecho del ratón y seleccionar "abrir en una nueva pestaña".
Intenté adjuntar un controlador de eventos de clic en el enlace con event.stopImmediatePropagation () pero eso no parece funcionar. ¿Alguien tiene alguna idea de cómo solucionar este problema?
¿Ha pensado en poner un condicional en su controlador de clic para no evitar el preventDefault cuando es ese enlace? Si prueba si el elemento debería funcionar con normalidad, entonces puede return antes de preventDefault y el enlace debería funcionar con normalidad.
Aquí hay un ejemplo ( JSBin ):
function clickHandler(e) {
// If the target element has the class `test-clickable` then the
// function will return early, before `preventDefault`.
if (this.className.indexOf(''test-clickable'') !== -1) {
return;
}
alert(''That link is not clickable because of `preventDefault`'');
e.preventDefault();
}
$(''a'').click(clickHandler);
a {
display: block;
}
a:after {
content: '' [class='' attr(class)'']'';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a class=''test-clickable'' href=''http://www.google.com'' target=''_blank''>Link</a>
<a class=''test-not-clickable'' href=''http://www.google.com'' target=''_blank''>Link</a>
</body>
</html>
Amir, con respecto a su respuesta, creo que PopupBlocker puede bloquear la ventana de apertura dentro de la función javascript desde un evento seleccionado
Pinghsien422, su servidor debe devolver Json y no completar html. Si debe devolverlo, realice los siguientes cambios:
1.Retire la función clientSelect
2.No se necesita una etiqueta ''a'' en la función renderData
$("#mypage input[name=''client'']").autocomplete({
minLength: 1,
appendTo: $(this).parent(),
source: ''/filter_client/'',
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append( item.label )
.appendTo(ul);
};
De acuerdo, el evento de jquery tiene prioridad sobre tu evento seleccionado, no importa lo que hagas, no puedes detener nada allí. Pero puede proxificar el evento de selección de menús y luego decidir si se debe invocar ( jsfiddle ).
var ac = $("#mypage input[name=''client'']").autocomplete({
minLength: 1,
appendTo: document.body,
source: availableTags,
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete");
ac._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<div>"+item.label+"<a class=''link'' href=''http://test''>(http://test)</a></div>")
.appendTo(ul);
};
var ms = $._data(ac.menu.element.get(0), ''events'').menuselect[0].handler;
ac.menu.element.off("menuselect");
ac.menu.element.on("menuselect", function (ev) {
if($(ev.originalEvent.target).hasClass("link"))
return;
ms.apply(this,arguments);
});
Trate de hacer even.stopImmediatePropagation en onclick binding to link. La página se está abriendo y el controlador de selección no se ejecuta.
var li = $("<li></li>")
.data("item.autocomplete", item)
.append(''<a class="ac-item-a" href="http://www.nba.com">'' + item.label + ''</a>'')
.appendTo(ul);
li.find(''a'').bind(''click'', function(event){ event.stopImmediatePropagation() });
return li;
Una forma de hacerlo es definiendo una función de select personalizada y no utilizando una <a> para los enlaces
HTML:
<div class="ui-widget">
<label for="tags">Tags:</label>
<input id="tags">
</div>
JS:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$("#tags").autocomplete({
source: availableTags,
select: function (event, ui) {
var elem = $(event.originalEvent.toElement);
if (elem.hasClass(''ac-item-a'')) {
var url = elem.attr(''data-url'');
event.preventDefault();
window.open(url, ''_blank '');
}
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append(''<a>'' + item.label + ''<span class="ac-item-a" data-url="http://www.nba.com"> View Details</span></a>'')
.appendTo(ul);
};
JSFIDDLE .