jquery-ui-autocomplete - ejemplo - jquery autocomplete select

jQuery UI autocomplete muestra valor en lugar de etiqueta en el campo de entrada

Question

Un problema potencialmente simple con jQuery UI autocompletar me está impidiendo. Mi fuente es

var ac = [
    {
        label: "One Thing",
        value: "One-Thing"
    },
    {
        label: "Two Thing",
        value: "Two-Thing"
    },      
]

Estoy invocando el widget con

$(function() {
    $( "#search" ).autocomplete({
        source: PK.getAutocompleteSource(),
        focus: function( event, ui ) {
            $("#search").val(ui.item.label);
            return false;  
        },
        select: function( event, ui ) {
            $("#search").val(ui.item.label);
            PK.render(ui.item.value);
        }
    });
});

Todo funciona bien. Cuando #search el campo de entrada #search , la etiqueta coincidente aparece en el menú desplegable, y cuando select la búsqueda correcta. El widget incluso muestra la label en el campo de entrada #search cuando selecciono diferentes elementos en el menú desplegable usando las teclas de flecha (o el mouse). Excepto, tan pronto como #search Enter, el widget llena el campo de entrada #search con el value lugar de la label . Así que el campo muestra One-Thing en lugar de One Thing .

¿Cómo puedo corregir esto? Seguramente lo que estoy esperando es el comportamiento más razonable, ¿no?

Answer 1

Si desea que la etiqueta sea su valor, simplemente haga que la fuente sea

var ac = ["One Thing", "Two Thing"]      

alternativamente, el método de select de autocompletar acción predeterminada es colocar el objeto de value (si se especifica) como el valor de su entrada. También puede poner event.preventDefault() en la función de selección y pondrá la etiqueta como el valor (como lo ha hecho)

select: function( event, ui ) {
        event.preventDefault();
        $("#search").val(ui.item.label);
        PK.render(ui.item.value);
    }

Answer 2

Si desea que su etiqueta sea su valor en el cuadro de texto enEnfoque Y enSeleccione use este código:

select: function(event, ui) { 
        $(''#hiddenid'').val(ui.item.value); 
        event.preventDefault(); 
        $("#search").val(ui.item.label); },

focus: function(event, ui) { 
       event.preventDefault(); 
       $("#search").val(ui.item.label);}

Me faltaba el evento onFocus (solo configuraba el evento onSelect). Por lo tanto, el valor continuó mostrando en la entrada de texto.

Answer 3

Todavía tenía un problema con las teclas de flecha que muestran los valores. Así que en realidad me pareció mejor asignar tanto el valor como la etiqueta a la etiqueta, y luego poner el valor en una tercera propiedad de los datos. Por ejemplo, vamos a ponerlo en id.

var ac = [
    {
        label: "One Thing",
        value: "One Thing",
        id: "One-Thing",
    },
    {
        label: "Two Thing",
        value: "Two Thing",
        id: "Two-Thing"
    },      
]

Luego, cuando usa el evento de selección, puede obtener una identificación de la interfaz de usuario:

select: function( event, ui ) {
    PK.render(ui.item.id);
}