Autocompletar aplicando valor no etiquetar en el cuadro de texto

Question

Tengo problemas para intentar que la función autocompletar funcione correctamente.

Todo se ve bien para mí, 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 seleccione un elemento en el menú desplegable el valor se ha aplicado a la caja de texto en lugar de la etiqueta.

¿Qué he hecho mal?

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

Answer 1

El comportamiento predeterminado del evento select es actualizar el input con ui.item.value. Este código ejecuta después de su controlador de eventos.

Simplemente devuelva false o llame al event.preventDefault() para evitar que esto ocurra. También recomendaría hacer algo similar para el evento focus para evitar ui.item.value de ser colocado en el input como el usuario se desplaza sobre 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/

Answer 2

Sólo me gustaría añadir que en vez en incluir elemento de entrada por "id" dentro de seleccione y enfoque funciones de devolución de llamada puede utilizar este selector, como:

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

es útil cuando se asigna la función de autocompletar múltiples elementos, es decir por clase:

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

Answer 3

En mi caso, tengo que grabar otro campo 'id' en una entrada oculta. Así que agregué otro campo en los datos devueltos por una llamada ajax.

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

Y hemos agregado un enlace 'crear nuevo' en la parte inferior 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 se puede añadir cualquier campo de datos adicional que no sea sólo la 'etiqueta' y el 'valor'.

Yo uso modal de arranque y puede ser de la siguiente manera:

<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>