ejemplo - jquery autocomplete select event

Categorías de autocompletado de jQuery Seleccione etiqueta y valor

Question

Intentando obtener el autocompletado de jQuery con categorías para devolver el valor seleccionado al campo de búsqueda y el valor a un campo de entrada separado.

He modificado los datos para tener un valor, así como etiqueta y categoría.

Ver http://jsfiddle.net/chrisk/bM7ck/

Pero el valor siempre se devuelve al campo de búsqueda en lugar de a la etiqueta.

Answer 1

Así es como funciona el autocompletado de jquery ui cuando se proporcionan tanto una etiqueta como un valor. Si desea que la etiqueta vuelva al campo de búsqueda, cambie el nombre del campo de valor.

Fiddle actualizado: http://jsfiddle.net/jensbits/bM7ck/3/

Answer 2

Estás cerca, solo necesitas hacer lo siguiente:

1. Agregue return false al final de su controlador de evento select , y
2. Agregue un controlador de eventos para el evento de focus para que también pueda anularlo, utilizando la etiqueta en lugar del valor.

Aquí está su código actualizado:

$("#search").catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui) {
        $(''#search'').val(ui.item.label);
        $(''#searchval'').val(ui.item.value);
        return false; // Prevent the widget from inserting the value.
    },
    focus: function(event, ui) {
        $("#search").val(ui.item.label);
        return false; // Prevent the widget from inserting the value.
    }
});

Aquí hay un ejemplo actualizado: http://jsfiddle.net/q2kDU/

Answer 3

$(function() {
        $( "#searchitems" ).autocomplete({
            source: [<?php echo $search /*example for full list in php*/?>],
            minLength: 2,
            select: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $(''#searchitemvalue'').val(ui.item.value);
                window.location="#"; //location to go when you select an item
            },
            focus: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $(''#searchitemsvalue'').val(ui.item.value);
            }
        });
    });