jQuery completamento automatico e gestione problema valore/etichetta

Question

Sto provando ad avere un completamento automatico jQuery. Ho specificato alcuni dati ma quando seleziono un elemento nel menu a discesa, il valore viene sempre spostato negli elementi della meta area. Voglio l'etichetta. Come fare questo? Cercando di farlo mostrare l'etichetta in # meta-area piuttosto che il valore.

HTML:

... 
area:<input type='text' size='20' id='meta-area' /> 
    <input type='hidden' id='meta_search_ids' value='' /> 
... 

JavaScript:

$(document).ready(function(){ 
    var data =[ 
     {'label':'Core','value':1}, 
     {'label':' Selectors','value':2}, 
     {'label':'Events' ,'value':3}]; 

     $("#meta-area").autocomplete({source:data, 
      select: function(e, ui) { 
       $("#meta_search_ids").val(ui.item.value); 
       // this part is not working 
       //$(this).val(ui.item.label); 
       $('#meta-area').text('this is what I want'); 
      } 
     }); 
    //alert("this loaded"); 
}); 

Answer 1

L'azione predefinita di un evento select pone ui.item.value all'interno del input. È necessario utilizzare preventDefault con il vostro gestore di eventi:

$(document).ready(function(){ 
    var data =[ 
     {'label':'Core','value':1}, 
     {'label':' Selectors','value':2}, 
     {'label':'Events' ,'value':3}]; 

    $("#meta-area").autocomplete({ 
     source:data, 
     select: function(e, ui) { 
      e.preventDefault() // <--- Prevent the value from being inserted. 
      $("#meta_search_ids").val(ui.item.value); 

      $(this).val(ui.item.label); 
     } 
    }); 
    //alert("this loaded"); 
}); 

Esempio:http://jsfiddle.net/UGYzW/6/

Answer 2

Vuoi dire che? Cambia "area:" a nuova?

<span id='area'>area</span>:<input type='text' size='20' id='meta-area' /> 
    <input type='hidden' id='meta_search_ids' value='' /> 


<script> 
$(document).ready(function(){ 
    var data =[{'label':'Core','value':1}, 
    {'label':' Selectors','value':2}, 
    {'label':'Events' ,'value':3}]; 
$("#meta-area").autocomplete({source:data, 
    select: function(e, ui) { 
    $("#meta_search_ids").val(ui.item.value); 
    // working like this? 
    $('#area').text(ui.item.label); 
    // $('#area').text('this is what I want'); 
    } 
}); 
    //alert("this loaded"); 
}); 
</script>