Completamento automatico applicazione del valore non etichettato nella casella di testo

Question

Im avendo problemi nel tentativo di ottenere il completamento automatico per funzionare correttamente.

Sembra tutto ok per me, ma ....

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

Tuttavia quando si seleziona una voce dal menu a discesa il valore è stato applicato alla casella di testo al posto dell'etichetta.

Cosa ho fatto di sbagliato?

Se guardo la fonte usando firebug, posso vedere che il mio campo nascosto viene aggiornato correttamente.

Answer 1

Il comportamento predefinito dell'evento select consiste nell'aggiornare input con ui.item.value. Questo codice viene eseguito dopo il il gestore di eventi.

È sufficiente restituire false o chiamare event.preventDefault() per impedire che ciò si verifichi. Io consiglio anche di fare qualcosa di simile per l'evento focus per evitare ui.item.value l'immissione nel input come l'utente passa sopra scelte:

$("#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); 
    } 
}); 

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

Answer 2

Proprio vorrei aggiungere che, invece dell'elemento di input di riferimento di "id" all'interno di selezionare e focus funzioni di richiamata che è possibile utilizzare questo selettore, come:

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

è utile quando si assegna completamento automatico per gli elementi multipli, vale a dire per classe:

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

Answer 3

Nel mio caso, ho bisogno di registrare un altro campo 'id' in un input nascosto. Quindi aggiungo un altro campo nei dati restituiti dalla chiamata ajax.

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

E hanno aggiunto un collegamento "crea nuovo" in fondo all'elenco. Al clic sul pulsante 'crea nuovo', apparirà una modal e potrai creare un nuovo oggetto da lì.

$('#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'); 
      } 
     } 
    ); 

Credo che il punto è che è possibile aggiungere qualsiasi campo dati aggiuntivi diversi dal semplice 'label' e 'valore'.

Io uso modale bootstrap e può essere come di seguito:

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