Управление отображением выбранного элемента с помощью виджета автозаполнения jQueryUI

Question

Я использую виджет автозаполнения jQueryUI для получения данных из веб-службы JSON. Это очень похоже на пример ниже:

<script>
$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2
    });
});
</script>

Мой вопрос: как я могу контролировать, что помещается в поле ввода (#city), когда что-то выбирается из списка. На данный момент автозаполнение работает хорошо и выдаст список меток. Однако, когда вы выбираете один из элементов списка, он помещает значение во входные данные. В этом случае это идентификатор, который я хочу использовать, но я хочу, чтобы на входе отображались данные метки, а не данные значения.

Answer 1

Ну, вы должны сделать значение таким же, как метка. В вашем случае это будет выглядеть так:

success: function( data ) {
   response( $.map( data.geonames, function( item ) {
      return {
         label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
         value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
      }

   }));
}

Я предполагаю, что вам нужно это значение для других целей. У меня была такая же ситуация, и в зависимости от ваших требований есть несколько вариантов.

У вас может быть скрытое поле, в котором вы можете сохранить значение при выборе опции.

Вот как это будет выглядеть:

$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.id,
                            source: item
                        }
                    }));
                }
            });
        },
        minLength: 2,
        change: function(event, ui) {
           if (ui.item) {
              $('#your_hidden_input').val(ui.item.source.id);
              $(this).val(ui.item.value);
           }
        }
    });
});

Answer 2

Если вы используете виджет автозаполнения jQueryUI, то в опции выбора виджета вы можете сделать следующее:

select: event.preventDefault();
         $("#city").val(ui.item.label);

Это вставит данные метки конкретного элемента в поле ввода при событии select,