jQuery自動完成和處理價值/標籤問題

Question

我想要一個jQuery自動完成。我已經指定了一些數據，但是當我在下拉列表中選擇一個項目時，它總是將值推入元區域元素。我想要標籤。這個怎麼做？試圖讓它在＃meta-area中顯示標籤而不是值。

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

一個select事件的默認動作將ui.item.value的input內。您需要使用preventDefault與事件處理程序：

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

例子：http://jsfiddle.net/UGYzW/6/

Answer 2

你的意思是？將「區域：」更改爲新的？

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