jQuery autocompletar y manejar el problema de valor/etiqueta

Question

Estoy tratando de tener una autocompletar jQuery. He especificado algunos datos, pero cuando selecciono un elemento en el menú desplegable, siempre empuja el valor en los elementos de meta-área. Quiero la etiqueta. ¿Como hacer esto? Intentando que muestre la etiqueta en # meta-área en lugar del valor.

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

La acción predeterminada de un evento select coloca dentro de la ui.item.valueinput. Es necesario utilizar preventDefault con su controlador de eventos:

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

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

Answer 2

Usted quiere decir? Cambiar "área:" a uno nuevo?

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