jQuery tự động hoàn tất và xử lý vấn đề về giá trị/nhãn

Question

Tôi đang cố gắng để có tự động hoàn thành jQuery. Tôi đã chỉ định một số dữ liệu nhưng khi tôi chọn một mục trên menu thả xuống, nó luôn đẩy giá trị vào các phần tử vùng meta. Tôi muốn nhãn. làm như thế nào? Cố gắng làm cho nó hiển thị nhãn trong # meta-area thay vì giá trị.

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

Hành động mặc định của một sự kiện select đặt ui.item.value bên trong input. Bạn cần phải sử dụng preventDefault với xử lý sự kiện của bạn:

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

Ví dụ:http://jsfiddle.net/UGYzW/6/

Answer 2

Bạn có nghĩa là? Thay đổi "khu vực:" thành địa chỉ mới?

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