Estoy usando jQuery autocomplete plugin, NO la autocompleta de UI. Me gustaría hacer que aparezca un que no se puede cliquear Sin resultados cada vez que ingresan algo que no tiene resultados de la función de autocompletar. ¿Cómo puedo hacer eso?Mostrando ningún mensaje de resultados en el autocompletado de jquery
Aquí hay una solución que requiere algunas ediciones pequeñas para jquery.autocomplete.js.
En jquery.autocomplete.js:
Editar la función hideResultsNow() para que se llama emptyData() primero que
function hideResultsNow() {
$('#emptyData').show();
...
}
Cambiar el enlace pulsación prolongada en el campo de entrada para ocultar #emptyData después cada pulsación de tecla
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
$('#emptyData').hide();
...
}
Ocultar #emptyData después de una selección exitosa (justo antes de que devuelve true)
function selectCurrent() {
...
$('#emptyData').hide();
return true;
}
Luego debe agregar un div con la misma lista de estilo llamada #emptyData a su HTML debajo del cuadro de entrada. Aquí está el HTML completo para la página de prueba que utilicé.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
<div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'>
<ul style="max-height: 180px; overflow: auto;">
<li id='noDataMsg' >No Results</li>
</ul>
</div>
</body>
</html>
La posición de #emptyData fue tomada desde la posición de autocompletar, y el estilo CSS no es exactamente lo mismo que para las respuestas correctas, pero aparte de eso no creo que no debería haber nada que necesitará cambios . Espero que resuelva tu problema.
+1 ¡Esta es una solución bastante buena! –
Gracias, funcionó para mí. Un par de cambios que he hecho para mi uso: 1) Obligado a no mostrar() cuando no se ingresó nada 2) con múltiples autocompletos en la página, necesita agregar algunos ifs para que funcione con los correctos. Gracias por la respuesta completa! – babonk
@babonk: ¿cómo obligaste a que esto no se muestre cuando no se ingresó nada, y presumiblemente antes de cualquier entrada? – InnateDev
Aquí hay 1/2 una solución; haga que su llamada AJAX devuelva la cadena "Sin resultados" cuando no tenga resultados.
Para hacer que el único resultado no se pueda hacer clic probablemente requiera buscar en el origen del complemento.
Creo que en lugar de obtener Autocompletar para hacer el ajax puede hacerlo usted mismo, luego pasar los resultados a la Autocompletar, con un filtro simple entre esos dos para que no haya resultados provenientes del servidor.
var input = $('input.autocomplete');
var inputLimit = 10;
// Create warning message and hide it
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide();
input.keyup(function(){
warning.hide();
$.get('url.php', {q: this.value, limit: inputLimit}, function(data){
if(data){
input.autocomplete(data);
} else {
warning.show();
}
}
});
Por supuesto, la advertencia no aparece dentro del campo de autocompletar en sí, pero esta es la mejor solución que se me ocurre sin modificar la fuente del plugin.
Entonces, si no hay resultados, quiere que aparezca y muestre un "resultado", que es un elemento que dice "Sin resultados" y que no se puede hacer clic en? –
Sí, exactamente – babonk