Рубрики
Без рубрики

Bootstrap 5 автозаполнение

Что такое автозаполнение Bootstrap? Автозаполненный компонент прогнозирует, что слова набравшиеся базы … Tagged с Bootstrap, JavaScript, WebDev, HTML.

Что такое автозаполнение Bootstrap?

Компонент автозаполнения предсказывает слова, набираемые на основе первых нескольких букв, заданных пользователем. Вы можете найти список, используя базовый свиток и стрелки клавиатуры

Установка

Ручная установка (ZIP пакет)

Чтобы воспользоваться нашим компонентом нашего загрузочного изображения и использовать их в вашем проекте, сначала нужно установить MDB 5 бесплатный пакет

MDB CLI

Смотреть наши Краткое начало Учебное пособие Чтобы обнаружить и использовать полный потенциал MDB 5 и MDB CLI

NPM

Предварительные условия

Перед началом проекта обязательно установите Узел LTS (12.x.x Рекомендуется) .

Установка

Чтобы установить набор MDB UI в вашем проекте, легко введите следующую команду в терминале:

npm i mdb-ui-kit
Импортируя модули JS

Вы можете импортировать всю библиотеку или только отдельные модули:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
Импорт файла CSS

Чтобы импортировать MDB StyleSheet, пожалуйста, используйте следующий синтаксис:

@import '~mdb-ui-kit/css/mdb.min.css';
Импорт модулей SCSS

Вы также можете импортировать отдельные модули SCSS. Чтобы сделать это правильно, мы рекомендуем скопировать их из Node_Modules/MDB-UI-KIT/SRC/SCSS, непосредственно к вашему проекту и импортируйте так же, как файлы CSS.

Интеграция WebPack

Вы можете значительно ускорить процесс создания нового проекта на основе WebPack, используя наши Стартер Отказ

CDN.

Установка через CDN является одним из самых простых методов интеграции комплекта UI MDB с вашим проектом. Просто скопируйте последние скомпилированные метки JS-скрипта и тег CSS Link из CDNJS к заявке.

Не забудьте добавить также шрифт Swesome и Roboto шрифт, если вам это нужно. Вот пример код:

CSS.
Js.

Настройка

Основной пример

Фильтр Вариант необходим для правильной работы компонента. Опция принимает функцию, которая, как ожидается, вернет массив результатов или Обещание это решает на массив результатов.

HTML
Js.
const basicAutocomplete = document.querySelector('#basic');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
  return data.filter((item) => {
    return item.toLowerCase().startsWith(value.toLowerCase());
  });
};

new mdb.Autocomplete(basicAutocomplete, {
  filter: dataFilter
});
Значение отображения

DisplayValue Опция Разрешить отдельное значение оригинального значения результата от значения, которое будет отображаться в списке результатов или входной (после выбора). Это полезно, когда данные возвращаются Фильтр Функция – это массив объектов. Вы можете указать, какой параметр объекта должен отображаться.

HTML
Js.
const displayValueAutocomplete = document.querySelector('#displayValue');
const data = [
  { title: 'One', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
  { title: 'Two', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
  { title: 'Three', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
  { title: 'Four', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' },
  { title: 'Five', description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit' }
];
const dataFilter = (value) => {
  return data.filter((item) => {
    return item.title.toLowerCase().startsWith(value.toLowerCase());
  });
};

new mdb.Autocomplete(displayValueAutocomplete, {
  filter: dataFilter,
  displayValue: (value) => value.title,
});

Вы можете увидеть больше примеров настройки на странице документации AutoComplete

Решающие ресурсы

Вот ресурсы, которые мы готовили, чтобы помочь вам работать с этим компонентом:

  1. Читать 📄 Автозаполнение Страница документации <- Начните здесь
  2. Чтобы получить максимальную отдачу от вашего проекта, вы также должны ознакомиться с другими вариантами форм, связанные с автозаполнением. См. Раздел ниже, чтобы найти список их.
  3. Вы можете использовать предсказанные формы элементы в 📥 Шаблоны загрузки стартера 5 шаблонов
  4. Шаблоны являются частью 📦 Бесплатный комплект пользовательского интерфейса для Bootstrap 5
  5. После завершения проекта вы можете опубликовать его с CLI для получения 💽 бесплатный хостинг (бета)

Связанные варианты и функции содержания и стилей

Узнайте Bootstrap 5 в 1.5H

Дополнительные ресурсы

Узнайте веб-разработку с нашими Обучение дорожной кармы : 🎓 Начните узнать

Присоединяйтесь к нашему списку рассылки и получите Эксклюзивные ресурсы Для разработчиков 🎁. Получить подарки

Присоединяйтесь к нашей частной группе FB для Опыт вдохновения и сообщества 👨👩👧👦. Спросите присоединиться

Поддержка Создание пакетов с открытым исходным кодом С звездой на Github

Оригинал: “https://dev.to/mdbootstrap/bootstrap-5-autocomplete-3bbl”

Читайте ещё по теме: