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

你的意思是？将“area：”更改为新的？

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

jQuery自动完成并处理值/标签问题

2 个答案: