Vue AutoComplete — это компонент ввода, который предлагает подсказки в реальном времени при вводе текста. Он поддерживает Vue 3 с PrimeVue 3 и Vue 2 с PrimeVue 2.
Настраивать
См. Документацию по установке PrimeVue для загрузки и установки для вашей среды, такой как Vue CLI, Vite или браузер.
Импортировать
Начиная
Автозаполнение использует v-model для двусторонней привязки, требует список предложений и полный метод для запроса результатов. Полный метод получает текст запроса как свойство event.query и должен обновлять предложения с результатами поиска. Пример ниже подключается к удаленному источнику данных для получения результатов;
Падать
Включение свойства раскрывающегося списка отображает кнопку рядом с полем ввода, где поведение нажатия кнопки определяется с помощью свойства dropdownMode, которое принимает «пустое» или «текущее» в качестве возможных значений. «Пустой» — это режим по умолчанию для отправки запроса с пустой строкой, тогда как «текущая» настройка отправляет запрос с текущим значением ввода.
Множественный режим
Множественный режим включается с помощью множественного свойства для выбора более одного значения из автозаполнения. В этом случае ссылка на значение должна быть массивом.
Объекты
Автозаполнение также может работать с объектами, используя свойство поля, которое определяет метку для отображения в качестве предложения. Значение, переданное модели, по-прежнему будет экземпляром объекта предложения. Вот пример объекта Country с полями имени и кода, такими как {name:"United States",code:"USA"}.
Шаблоны
Шаблон элемента позволяет отображать пользовательский контент внутри панели предложений. Переменная slotProps, переданная в шаблон, предоставляет свойство элемента для представления элемента в коллекции предложений.
Тематика
Автозаполнение поддерживает различные темы с использованием материалов, Bootstrap, Fluent, а также ваши собственные темы с помощью инструмента Дизайнер.
Ресурсы
Посетите витрину PrimeVue AutoComplete, чтобы ознакомиться с демонстрационными примерами и документацией.
