jQuery autocompletar no seleccionar elemento

Question

En la opción "fuente" obtengo con ajax los resultados + 1 nota personalizada de texto con información sobre posibles resultados. Me gusta: "Mostrar 2 de 3456 resultados". Es solo una información para el usuario.

Para la última entrada en la lista -ul-, no habría procesado los siguientes eventos: keyup, keydown, pageup y pagedown.

Para esto, tengo en la opción "abrir" set esto:

open: function(event, ui) { 
$("ul.ui-autocomplete.ui-menu li:last").removeClass("ui-menu-item").removeAttr("role").html('Show 2 of 3456 results'); 
}, 

HTML ahora el siguiente aspecto:

 
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;"> 
<li class="ui-menu-item" role="menuitem"> 
    <a class="ui-corner-all" tabindex="-1">Result 1</a> 
</li> 
<li class="ui-menu-item" role="menuitem"> 
    <a class="ui-corner-all" tabindex="-1">Result 2</a> 
</li> 
<li class="">Show 2 of 3456 results</li> 
</ul> 

Esto funciona si al menos da un resultado mínimo real, no solo el último texto de la nota.

Pero, ¿qué sucede si no hay ningún resultado disponible y solo el texto de la nota (último elemento) "Sin resultados", aparece un mensaje de error en los eventos: keyup, keydown, pageup y pagedown.

error en Firebug: item.offset() es nulo

 
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;"> 
<li class="">No Results</li> 
</ul> 

¿Qué puedo hacer para añadir un encargo -li- al final de la lista y que no se puede seleccionar?

jQuery-UI 1.8.13

Answer 1

he encontrado que este widget se quejará si sus li elementos no contienen una etiqueta a. Me doy cuenta de que esto lo hace seleccionable, por lo que tendrá que extender la clase un poco para su caso o crear una regla CSS que garantice que el li no obtenga un estado seleccionado (lo cual es un poco complicado, lo admito)

Answer 2

en lugar de jugar con los selectores CSS, ¿por qué no se unen a los select y change eventos para inspeccionar los datos a medida que está añadiendo al objeto (disponible a través del argumento ui.item a esos eventos)? Acabaría con algo como esto:

$(function() { 
    $("#acInput").autocomplete({ 
            source: availableTags, 
            select: function(event, ui) { 
             // if it's your info item, then 
             event.preventDefault(); 
            }, 
            change: function(event, ui) { 
             // if it's your info item, then 
             event.preventDefault(); 
            } 
           }); 
}); 

Tenga en cuenta que la preventDefault() sólo se detiene ese evento. En ciertos casos (cuando se usa el teclado para navegar por la lista), se rellenará la entrada con el valor del elemento. Te gustaría que las pruebas restablezcan el valor del cuadro de texto si determinaste que el elemento seleccionado o el valor a punto de cambiar era, de hecho, tu elemento de datos.