jQuery otomatik tamamlama ve değer/etiket sorununu işleme

Question

Bir jQuery otomatik tamamlama çalışıyorum. Bazı veriler belirttim ama açılır menüden bir öğe seçtiğimde, değeri meta-alan elemanlarına her zaman iter. Etiketi istiyorum. Bu nasıl yapılır? Etiketi, değer yerine # meta alanında göstermeye çalışmak.

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

bir select olayın varsayılan eylem input iç ui.item.value yerleştirir. Eğer olay işleyicisi ile preventDefault kullanmak gerekir:

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

Örnek:http://jsfiddle.net/UGYzW/6/

Answer 2

Bunu demek? Yeni alan için "alan:" değiştirilsin mi?

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