Автозаполнение jQuery и обработка проблемы со значением/меткой

Я пытаюсь использовать автозаполнение jQuery. Я указал некоторые данные, но когда я выбираю элемент в раскрывающемся списке, он всегда вставляет значение в элементы метаобласти. Я хочу этикетку. Как это сделать? Попытка заставить его отображать метку в #meta-области, а не значение.

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

jquery ajax jquery-ui jquery-ui-autocomplete
person timpone    schedule 20.01.2012    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Действие по умолчанию для события 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/

person Andrew Whitaker    schedule 20.01.2012

arrow_upward
0
arrow_downward

Вы имеете в виду, что? Изменить «область:» на новую?

<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>
person Bon Espresso    schedule 20.01.2012
comment
Извините - не понимаю, что вы говорите. Прямо сейчас он заполняет метаобласть переменной значения, и я хотел бы иметь метку. - person timpone; 20.01.2012
comment
Можно получить такую ​​метку $('#meta-area').text(ui.item.label);. Оно работает. - person Bon Espresso; 20.01.2012