Автозаполнение пользовательского интерфейса Jquery: и метки, и значения ведут себя как значения

0

Я работаю с автозаполнением JQuery UI.

Проблема, с которой я столкнулась, заключается в следующем: когда я работаю с внешним источником данных, как ярлыки, так и значения ведут себя как значения.

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

Другими словами, они оба отображаются как значения, вместо того, чтобы появляться как метка и значение.

Когда вы нажимаете на любой из них, предупреждение (ui.item.label); показывает его значение, будь то метка или значение.

Я не понимаю, почему ярлык и ценность ведут себя как значения, тем более, что я четко обозначил его в json-источнике.

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

Здесь локальный код:

<script>
    $(document).ready(function() {
        $("#inputbox").autocomplete({
            source: "sd/aa.php",
            minLength: 3,
            select: function(event, ui) {
                alert(ui.item.label);
                alert(ui.item.value);
            }
        });
    });
</script>

<input id="inputbox" />
  • 0
    Какой формат возвращает файл aa.php ? jQuery Autocomplete ожидает определенный формат для отображения меток против значений.
  • 0
    Какова структура пользовательского ui при ui из внешнего? У меня такое чувство, что ты получаешь другую структуру. Добавить console.log (ui); до ваших предупреждений.
Теги:
jquery-autocomplete

1 ответ

4
Лучший ответ

Почему... возможно

При использовании автозаполнения jQuery он ожидает определенных свойств метки и значения при использовании сложных объектов.

Например, объект, который имеет пользовательские свойства, мы скажем Id и описание, Autocomplete будет искать свойство label и value. Если вы определяете свойство label или value, оно будет использовать это свойство как для отображаемой метки, так и для значения.

Внешняя служба должна вернуть объект, который выглядит так:

[{
    //Your custom properties
    id: 78923,
    description: 'A very nice widget',
    //Below are autocomplete specific properties
    label: 'Nice Widget A',
    value: '$19.99'
}]

Возможные решения

  1. Первый способ заставить это работать - настроить службу, чтобы добавить свойство label и value в json, возвращенный клиенту.

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

    ...
source: function (request, response) {
    $.ajax({
        url: "/my/service?term=" + escape(request.term),
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            var mappedResults = $.map(data, function (item) {
                //Extend the service data with a label and value property that autocomplete uses
                return $.extend(item, { label: item.description, value: item.id });
            });

            response(mappedResults);
        }
    });
}
...

Это также полезно, если вы хотите использовать другие значения, предоставляемые службой, для чего-то еще. К ним можно получить доступ через любое из событий функции автозаполнения в виде ui.item.[yourProperty]. Поэтому, если я дал ответ на событие select виджета ui.item.description, я мог бы получить доступ к описанию через ui.item.description.

Поделиться
  • 0
    благодарю вас. Мой JSON был поврежден из-за проблемы с массивом php. у него не было [и] в начале и в конце.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню