floatype.js - Автозаполнение / Улучшение / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

Язык: Русский

Вес файла: 7.4 Kb

Уникальный ID: 6098

Посмотрели: 428 раз

Скачать бесплатно

Посетить Демо страница

Помощь: установка & настройка

Скачали бесплатно: 6 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 1 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/knadh/floatype.js

Информация: Пользователям

Информация: Правообладателям

Теги: Bootstrap, автозаполнение, Plugin

Поделился: BootstrapТема

Добавлено: 2024-01-06 в 10:40

Метка: 1704526968

⇄ ⇅

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<style>
 .floatype {
 position: absolute;
 background: #f8f8f8;
 border: 1px solid #ccc;
 box-shadow: 2px 2px 2px #eee;
 text-align: left;
 max-width: 200px;
 }
 .floatype-item {
 padding-bottom: 5px;
 padding: 3px 10px;
 cursor: pointer;
 }
 .floatype-item:hover {
 background: #f1f1f1;
 }
 .floatype-sel {
 background: #f1f1f1;
 font-weight: bold;
 }
</style>

<div class="container"><div class="col-md-12">

<h1 class="text-center my-3">floatype.js & BootstrapTema</h1>

<textarea class="form-control" rows="10" placeholder="Начните вводить"></textarea>

</div></div>

<script type="module">
 import { floatype } from '/plugins/2024/floatype/floatype.js';
 document.querySelector("textarea").value = "";
 const WORDS = ["ананас", "баян", "ветер", "гроза", "дом", "ель", "ёж", "жук", "зима", "игра", "кино", "лимон", "мост", "нос", "озеро", "пень", "рак", "сон", "танк", "уж", "флаг", "хрен", "цена", "чёрт", "шуба", "щит", "эталон", "юг", "якорь"];
 floatype(document.querySelector("textarea"), {
 onQuery: async (val) => {
 const q = val.trim().toLowerCase();
 return WORDS.filter(s => s.startsWith(q)).slice(0, 10);
 }
 });
</script>