Проблема с пользовательскими свойствами в jQuery UI Autocomplete

Question

У меня возникает проблема с пользовательскими свойствами при использовании функции автозаполнения jQuery UI. По какой-то странной причине функция автозаполнения не позволит мне использовать атрибут make или id для ui.item.make или ui.item.id, но работает, когда он установлен в ui.item.label.

Здесь JSFiddle с примером проблемы, с которой я сталкиваюсь. Вот еще example, где работает автозаполнение, но разница - это только свойство метки.

Любая информация, почему использование пользовательского свойства не работает для меня, будет с благодарностью.

Answer 1

Вы можете просто предварительно обработать список марок (см. ForEach) - ЕСЛИ вы получаете данные через ajax, вы также можете сделать что-то подобное. ПРИМЕЧАНИЕ. Я также добавил return false к вашему выбору, чтобы он не использовал значение и вместо этого использовал ваш make.

var carMake = [{ 
    "make": "Smart", 
     "id": '200038885' 
}, { 
    "make": "Bomb", 
     "id": '200038885' 
}, { 

    "make": "Volkswagen", 
     "id": '200000238' 
}]; 

function addlabel(row) { 
    row.label = row.make; 
    row.value = row.id; 
} 
carMake.forEach(addlabel); 
$("#vehicle_make").autocomplete({ 
    source: carMake, 
    delay: 0, 
    minLength: 1, 
    autoFocus: false, 
    select: function (event, ui) { 
     $(this).val(ui.item.make); 
     return false; 
    } 
}); 

EDIT: Ajax нотные данные: для обработки с использованием Ajax данных, это будет метод:

success: function (data) { 
    response($.map(data, function (item) { 
     return { 
       label: item.make 
       value: item.id, 
       make: item.make, 
       id: item.id 
       } 
    })) 
}, 

Answer 2

Согласно документации API:

Массив: массив может быть использован для локальных данных. Есть два поддерживаемых форматов: ...

Массив объектов с этикетки и значения свойств: [{ метка: "Choice1", значение: "value1"}, ...]

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

Answer 3

Я считаю, что признанные по умолчанию свойства включают только метку и значение. Если вы хотите использовать пользовательские свойства, вам необходимо реализовать свойство пользовательских данных.

бы выглядеть примерно так:

$("#vehicle_make").autocomplete({ 
    source: carMake, 
    delay: 0, 
    minLength: 1, 
    autoFocus: false, 
    select: function(event, ui) { 
     $('#vehicle_make').val(ui.item.make); 
    } 
    }) 
    .data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.make+ "<br>" + item.id + "</a>") 
     .appendTo(ul); 
    }; 

Или через jsfiddle

Это должно позволить вам получить доступ к объекту ui.item с пользовательскими свойствами.
(Если вы не хотите видеть идентификатор, вы можете просто скрыть его со скрытым полем в элементе списка).

См. http://jqueryui.com/autocomplete/#custom-data.