Автозаполнение jQueryUI на самом деле не автозаполнение

Question

Я использую функцию автозаполнения jQueryUI с пользовательскими данными и дисплеем , но удалось добиться того, чтобы он работал частично.Реальная функциональность сохранения в порядке, но я не могу понять, как правильно работать с UX.

Если я нажму на пустое поле, выпадающий список автозаполнения появится с каждым заполненным параметром.Однако, если я начну печатать, выпадающий список не фильтруется, он просто исчезает полностью.В этом случае список опций довольно мал, и мы используем эту технику, чтобы уменьшить вероятность опечаток при создании новых записей.Например, один выпадающий список включает в себя 2 варианта: Potomac Electric Power Co. и Virginia Electric & Power Co. Вряд ли нужна массовая фильтрация, но я ожидаю, что если кто-то начнет вводить «Poto» или даже «poto», список будетОтфильтровать от 2 до 1.

Это не происходит для меня.Я должен что-то упустить, так как их пример работает точно так, как я ожидал, но, возможно, я просто перестал видеть это.

      $provider_name.autocomplete({
        source: data.Utilities,
        minLength: 0,
        focus: function( event, ui ) {
          $provider_name.val( ui.item.Utility.name );
          return false;
        },
        select: function( event, ui ) {
          $provider_name.val( ui.item.Utility.name );
          $provider_id.val( ui.item.Utility.id );
          return false;
        }
      }).data( 'autocomplete' )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
          .data( "item.autocomplete", item )
          .append( '<a>' + item.Utility.name + '</a>' )
          .appendTo( ul );
      };

Любой вклад будет высоко оценен.Спасибо.

Answer 1

Проблема в том, что виджет autocomplete ожидает, что ваши данные будут отформатированы следующим образом:

[
    { label: 'Potomac Electric Power Co.', value: '1234' },
    { label: 'Virginia Electric & Power Co.', value: '1234' }
]

(Если ваше имя / значение совпадают, вам нужно только указать свойство value)

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

Я бы исправил это, массируя ваши данные, используя $.map(...) функция.Это позволит вам преобразовать ваши данные в более дружественный массив autocomplete.Что-то вроде:

var friendly = $.map(data.Utilities, function(el) {
    return { label: el.name, value: el.id };
});

и затем измените ваш обработчик событий select:

select: function( event, ui ) {
    $provider_name.val( ui.item.label );
    $provider_id.val( ui.item.value );
    return false;
}

Обратите внимание, что вы можете предоставить больше информации в каждом объекте массива source.Вы даже можете получить доступ к этим данным в обработчиках событий.Просто убедитесь, что вы указали свойства label и value.