Автозаполнение JQuery возвращает весь массив вместо искомого значения

Question

Приведенная ниже функция автозаполнения возвращает всех пользователей из ассоциативного $ FilterUsersArray вместо того, что я ввожу в тег ввода html.Мне нужно только получить пользователя, которого я ищу.Функция (запрос) выполняется правильно, в зависимости от того, что я ввожу во ввод.Код работает для стандартного неассоциативного массива.Я передаю ассоциативный массив с идентификаторами пользователя, чтобы затем использовать идентификатор для размещения личного сообщения.

функция автозаполнения:

$userSearchbox.autocomplete({
    source: function(request, response) {

        response($.map($filteredUsersArray, function (value, key) {
            return {
                label: value.username,
                value: key.id
            }
        }));
    }
});

$ FilterUsersArray:

    [{
    "id": "1",
    "userName": "maciek"
}, {
    "id": "2",
    "userName": "stefan"
}, {
    "id": "3",
    "userName": "newuser"
}, {
    "id": "8",
    "userName": "papaitalia"
}, {
    "id": "9",
    "userName": "nowy_user"
}, {
    "id": "12",
    "userName": "zenek"
}]

автозаполнениерезультат на странице:

Answer 1

Использование вами функции $.map не лучший подход для решения этой проблемы.Это связано с тем, что концепция карты состоит в том, чтобы сопоставлять старые элементы новым элементам методом 1: 1.Если ваш начальный массив состоит из 25 элементов, и вы отображаете его, вы получаете новый массив, который также содержит 25 элементов.

То, что вы хотите сделать, это ФИЛЬТР ваши данные!

В ванильном мире Javascript есть удобная функция .filter(), которую вы можете вызывать в любом массиве.Но в jQuery land эта функция называется $.grep(array, function); Первый аргумент - это исходный массив, который вы хотите отфильтровать.Второй аргумент - это функция, и это очень важно.

Функция, которую вы передаете при вызове $.grep, является тестом и будет вызываться один раз для каждого элемента в исходном массиве.Если тест возвращает true, тестируемый элемент добавляется в новый массив.Если тест возвращает false, элемент не добавляется в новый массив.Результатом всей функции $.grep является новый массив , содержащий только элементы, прошедшие тест.Фильтрованный массив !!!: D

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

JS Fiddle (с комментариями и журналами консоли)

JS Fiddle (без комментариев)

Читайте о $ .grep () на jQuery Docs