Autocompletar aplicando valor, no etiqueta al cuadro de texto

86

Tengo problemas para intentar que el autocompletado funcione correctamente.

Todo me parece bien, pero ...

<script>
$(function () {
    $("#customer-search").autocomplete({
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) {
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        }
    });
});
</script>
<div>
<input id="customer-search" />
 </div>
@Html.Hidden("selected-customer")

Sin embargo, cuando selecciono un elemento del menú desplegable, el valor se aplica al cuadro de texto en lugar de a la etiqueta.

¿Qué he hecho mal?

Si miro la fuente usando firebug, puedo ver que mi campo oculto se está actualizando correctamente.

Buzo Dan
fuente
1
¿Qué ves en la respuesta JSON en Firebug?
SLaks
[{"label": "Tom Smith", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Diver Dan

Respuestas:

215

El comportamiento predeterminado del selectevento es actualizar inputcon ui.item.value. Este código se ejecuta después de su controlador de eventos.

Simplemente regrese falseo llame event.preventDefault()para evitar que esto ocurra. También recomendaría hacer algo similar para el focusevento para evitar que ui.item.valuese coloque en el inputcuando el usuario se desplaza sobre las opciones:

$("#customer-search").autocomplete({
    /* snip */
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

Ejemplo: http://jsfiddle.net/andrewwhitaker/LCv8L/

Andrew Whitaker
fuente
1
¡Muy útil! ¿No quisiste decir$("#selected-customer").val(ui.item.value);
juanignaciosl
1
@juanignaciosl: No, ese código está destinado a actualizar el cuadro de búsqueda con el en labellugar del value.
Andrew Whitaker
Estoy almacenando valor en db no etiqueta, así que la próxima vez quiero establecer la etiqueta según el valor. ¿Cuál es la forma de hacerlo?
parth.hirpara
1
Oye, estoy tratando de hacer algo similar pero puse todo en focuslugar de select. El problema es que item.valuese establece en lugar de item.label. ¿De todos modos para eludir esto? lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
Batman
Lo mismo aquí, quiero que se muestre la etiqueta, el valor publicado. Me las arreglé para arreglar un kludge que involucra un elemento oculto (similar a la respuesta de @Yang Zhang a continuación, pero en este punto parece que rodar mi propio autocompletado será el enfoque menos elegante.)
Lori
15

Solo me gustaría agregar que en lugar de hacer referencia al elemento de entrada por "id" dentro de las funciones de devolución de llamada de selección y enfoque , puede usar este selector, como:

$(this).val(ui.item.label);

es útil cuando asigna autocompletar para múltiples elementos, es decir, por clase:

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});
Vlad
fuente
8

En mi caso, necesito registrar otro campo 'id' en una entrada oculta. Entonces agrego otro campo en los datos devueltos por la llamada ajax.

{label:"Name", value:"Value", id:"1"}

Y agregué un enlace 'crear nuevo' al final de la lista. Al hacer clic en 'crear nuevo', aparecerá un modal y podrá crear un nuevo elemento desde allí.

$('#vendorName').autocomplete
    (
        {
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            {
                ui.content.push
                ({
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                });
            },
            select: function (event, ui)
            {
                $('#vendorId').val(ui.item.id);
            },
            open: function (event, ui)
            {
                var createNewVendor = function () {
                    alert("Create new");
                }
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            }
        }
    );

Creo que el punto es que puede agregar cualquier campo de datos adicional que no sea solo 'etiqueta' y 'valor'.

Yo uso modal de arranque y puede ser el siguiente:

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>

Yang Zhang
fuente