Smart Select (Розумний вибір)

Smart Select дозволяє легко перетворити звичайні елементи форми <select> у динамічні інтерактивні сторінки або модальні вікна (Page, Popup, Sheet Modal чи Popover) з перемикачами radio або checkbox. Він забезпечує вбудований рядок пошуку, фільтрацію результатів, групування опцій через <optgroup> та безшовну підтримку Virtual List для списків із тисячами елементів.

1. Макет Smart Select (HTML Layout)

Макет Smart Select базується на звичайному елементі списку List View. До посилання списку .item-link додається спеціальний клас smart-select (та smart-select-init для автоматичної ініціалізації), а всередині розміщується стандартний тег <select>:

<div class="list">
  <ul>
    <li>
      <!-- Посилання Smart Select з автоініціалізацією -->
      <a class="item-link smart-select smart-select-init">
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          <option value="pear">Pear</option>
          <option value="orange">Orange</option>
          <option value="melon">Melon</option>
          <option value="peach">Peach</option>
          <option value="banana">Banana</option>
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Fruit</div>
            <!-- Сюди фреймворк автоматично записує обране значення -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

<a class="item-link smart-select"> — Основний контейнер Smart Select. Перетворює елемент списку на інтерактивне посилання, яке відкриває інтерфейс вибору.
smart-select-init — Клас автоініціалізації. Дозволяє Techno4 автоматично ініціалізувати компонент під час парсингу DOM без написання JS-коду.
<select> — Стандартний HTML-селект. Містить опції <option> та групи <optgroup>. Для множинного вибору використовуйте атрибут multiple.
<div class="item-title"> — Назва поля. За замовчуванням автоматично стає заголовком (navbar title) на відкритій сторінці чи попапі.
<div class="item-after"> — Цільовий елемент значення. Сюди фреймворк автоматично записує обране значення або перелік значень через кому.
data-open-in="..." — Спосіб відкриття. Підтримує значення page (за замовчуванням), popup, sheet або popover.

2. Методи застосунку Smart Select

Для створення, керування та отримання екземплярів Smart Select передбачено методи простору імен app.smartSelect.*:

Створення екземпляра: app.smartSelect.create(parameters)

— parameters: object конфігураційний об'єкт параметрів Smart Select.
— Повертає: новий ініціалізований екземпляр SmartSelect.
Знищення екземпляра: app.smartSelect.destroy(el)

— el: HTMLElement | CSSSelector або сам екземпляр SmartSelect.
Отримання екземпляра: app.smartSelect.get(el)

— el: HTMLElement | CSSSelector кореневого посилання.
— Повертає: знайдений екземпляр SmartSelect або undefined.
Відкриття вікна вибору: app.smartSelect.open(el)

— el: HTMLElement | CSSSelector посилання Smart Select.
— Повертає: екземпляр SmartSelect.
Закриття вікна вибору: app.smartSelect.close(el)

— el: HTMLElement | CSSSelector посилання або відкритого контейнера.
— Повертає: екземпляр SmartSelect.

3. Параметри Smart Select

Усі доступні параметри конфігурації Smart Select під час створення екземпляра через app.smartSelect.create(parameters) або через глобальний параметр app.params.smartSelect:

Параметр	За замовчуванням	Опис	Тип
el	—	Елемент Smart Select або CSS-селектор посилання списку	HTMLElement \| CSSSelector
view	—	Екземпляр View, у якому відкриватиметься сторінка Smart Select (за замовчуванням поточний батьківський View)	View
valueEl	—	Візуальний елемент для відображення значення (за замовчуванням шукає .item-after)	HTMLElement \| CSSSelector
setValueText	true	Автоматично записувати текст обраного значення у valueEl	boolean
formatValueText	—	Користувацька функція форматування тексту значень у списку	function(values)
openIn	'page'	Спосіб відкриття Smart Select: 'page' (нова сторінка), 'popup' (модальний попап), 'sheet' (висувна панель) або 'popover' (контекстне вікно)	string
pageTitle	—	Заголовок сторінки Smart Select (за замовчуванням береться з .item-title)	string
pageBackLinkText	''	Текст кнопки повернення назад на сторінці	string
popupCloseLinkText	''	Текст кнопки закриття у вікні Popup	string
popupPush	false	Ефект зсуву контенту при відкритті Popup	boolean
popupSwipeToClose	—	Дозволяє закривати Popup жестом свайпу	boolean
popupTabletFullscreen	false	Відкривати Popup на весь екран на планшетах	boolean
sheetCloseLinkText	''	Текст кнопки закриття у висувній панелі Sheet	string
sheetPush	false	Ефект зсуву контенту при відкритті Sheet	boolean
sheetSwipeToClose	—	Дозволяє закривати Sheet жестом свайпу	boolean
sheetBackdrop	false	Увімкнення затемнення фону (backdrop) для Sheet	boolean
searchbar	false	Увімкнення панелі швидкого пошуку серед елементів списку	boolean \| object
searchbarPlaceholder	'Search'	Текст підказки (placeholder) у полі пошуку	string
searchbarDisableText	''	Текст кнопки скасування пошуку (для теми iOS)	string
closeOnSelect	false	Автоматично закривати Smart Select одразу після вибору елемента (для одиночного вибору)	boolean
virtualList	false	Увімкнення віртуального списку для роботи з сотнями або тисячами опцій без падіння швидкодії	boolean
virtualListHeight	—	Фіксована висота елемента у віртуальному списку (у px або функція)	number \| function
scrollToSelectedItem	false	Автоматично прокручувати список до першого обраного елемента при відкритті	boolean
closeByBackdropClick	true	Закривати модальний контейнер при кліку поза його межами (на затемненому фоні)	boolean
routableModals	false	Додавати відкритий модальний Smart Select в історію роутера	boolean
cssClass	—	Додатковий CSS-клас для контейнера Smart Select	string

4. Методи та властивості екземпляра Smart Select

Після створення або отримання екземпляра через var smartSelect = app.smartSelect.create({ ... }) або app.smartSelect.get('.smart-select'), стають доступні його властивості та методи:

// Ініціалізація Smart Select через JavaScript API
const mySmartSelect = app.smartSelect.create({
  el: '.my-smart-select',
  openIn: 'popup',
  searchbar: true,
  searchbarPlaceholder: 'Шукати в списку...',
  closeOnSelect: false,
  on: {
    opened: function () {
      console.log('Smart Select успішно відкрито!');
    }
  }
});

Властивості екземпляра

Властивість	Опис	Тип
ss.app	Посилання на головний екземпляр застосунку Techno4	Techno4
ss.el	Кореневий HTML-елемент Smart Select (.item-link)	HTMLElement
ss.$el	Dom64-обгортка над кореневим елементом	Dom64Array
ss.selectEl	Дочірній елемент форми	HTMLElement
ss.$selectEl	Dom64-обгортка над елементом	Dom64Array
ss.valueEl	HTML-елемент для відображення значення (.item-after)	HTMLElement
ss.view	Екземпляр View, у якому відкривається Smart Select	View
ss.params	Об'єкт параметрів конфігурації екземпляра	object

Методи екземпляра

Метод	Опис	Тип
ss.open()	Відкриває вікно вибору Smart Select (сторінку, popup, sheet або popover)	SmartSelect
ss.close()	Закриває відкрите вікно Smart Select	SmartSelect
ss.getValue()	Повертає поточне обране значення (рядок для звичайного вибору або масив значень для multiple)	string \| array
ss.setValue(value)	Встановлює нове значення або масив значень для вибору	SmartSelect
ss.unsetValue()	Скидає всі обрані значення селекта	SmartSelect
ss.scrollToSelectedItem()	Прокручує список до першого обраного елемента	SmartSelect
ss.destroy()	Знищує екземпляр Smart Select та видаляє всі обробники подій	void

5. Керування через посилання та data-* атрибути

Будь-який параметр Smart Select можна передати безпосередньо у верстці через атрибути data-. Назва атрибута трансформується з camelCase у kebab-case (наприклад, параметр openIn стає data-open-in):

<!-- Відкриття у модальному вікні Popup із пошуком -->
<a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="Пошук моделі...">
  <select name="cars" multiple>
    <option value="audi" selected>Audi</option>
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes</option>
  </select>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Автомобілі</div>
    </div>
  </div>
</a>

<!-- Відкриття у нижній панелі Sheet Modal з автоматичним закриттям -->
<a class="item-link smart-select smart-select-init" data-open-in="sheet" data-close-on-select="true">
  <select name="platform">
    <option value="mac" selected>macOS</option>
    <option value="windows">Windows</option>
  </select>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Операційна система</div>
    </div>
  </div>
</a>

6. Події Smart Select (Events)

Smart Select генерує як стандартні події DOM на елементі .smart-select, так і події на екземплярі застосунку:

Події DOM

Подія	Опис	Ціль
smartselect:beforeopen	Спрацьовує перед початком відкриття Smart Select. Виклик event.detail.prevent() скасовує відкриття	HTMLElement (.smart-select)
smartselect:open	Спрацьовує на початку анімації відкриття	HTMLElement (.smart-select)
smartselect:opened	Спрацьовує після повного завершення анімації відкриття	HTMLElement (.smart-select)
smartselect:close	Спрацьовує на початку анімації закриття	HTMLElement (.smart-select)
smartselect:closed	Спрацьовує після повного завершення закриття	HTMLElement (.smart-select)
smartselect:beforedestroy	Спрацьовує безпосередньо перед знищенням екземпляра	HTMLElement (.smart-select)

Події екземпляра застосунку

Подія	Опис	Аргументи
smartSelectBeforeOpen	Спрацьовує перед відкриттям Smart Select	(smartSelect, prevent)
smartSelectOpen	Спрацьовує під час початку відкриття	(smartSelect)
smartSelectOpened	Спрацьовує після завершення відкриття	(smartSelect)
smartSelectClose	Спрацьовує під час початку закриття	(smartSelect)
smartSelectClosed	Спрацьовує після завершення закриття	(smartSelect)

7. Змінні CSS (CSS Custom Properties)

Для кастомізації візуального стилю Smart Select у висувних панелях Sheet передбачено наступні CSS-змінні:

:root {
  --t4-smart-select-sheet-bg: var(--t4-list-bg-color);
  --t4-smart-select-sheet-toolbar-border-color: var(--t4-bars-border-color);
}

8. Приклади застосунку Boonker

Нижче наведено повний вихідний код компонента apps/techno4-framework2-boonker/pages/smart-select.html з офіційного демонстраційного застосунку, де проілюстровано роботу зі звичайним вибором, групованим вибором у Popup із пошуком, вибором у Sheet та Popover:

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Smart Select</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      Techno4 дозволяє легко перетворити звичайні списки вибору в динамічні сторінки:
    </div>
    <div class="list">
      <ul>
        <!-- 1. Звичайний вибір на сторінці (Page) -->
        <li>
          <a class="item-link smart-select smart-select-init">
            <select name="fruits">
              <option value="apple" selected>Apple</option>
              <option value="pineapple">Pineapple</option>
              <option value="pear">Pear</option>
              <option value="orange">Orange</option>
              <option value="melon">Melon</option>
              <option value="peach">Peach</option>
              <option value="banana">Banana</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Fruit</div>
              </div>
            </div>
          </a>
        </li>

        <!-- 2. Множинний вибір із пошуком у вікні Popup -->
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="Search car">
            <select name="car" multiple>
              <optgroup label="Japanese">
                <option value="honda" selected>Honda</option>
                <option value="lexus">Lexus</option>
                <option value="mazda">Mazda</option>
                <option value="nissan">Nissan</option>
                <option value="toyota">Toyota</option>
              </optgroup>
              <optgroup label="German">
                <option value="audi" selected>Audi</option>
                <option value="bmw">BMW</option>
                <option value="mercedes">Mercedes</option>
                <option value="vw">Volkswagen</option>
                <option value="volvo">Volvo</option>
              </optgroup>
              <optgroup label="American">
                <option value="cadillac">Cadillac</option>
                <option value="chrysler">Chrysler</option>
                <option value="dodge">Dodge</option>
                <option value="ford" selected>Ford</option>
              </optgroup>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Car</div>
              </div>
            </div>
          </a>
        </li>

        <!-- 3. Вибір у нижній панелі Sheet Modal -->
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select name="mac-windows">
              <option value="mac" selected>Mac</option>
              <option value="windows">Windows</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Mac or Windows</div>
              </div>
            </div>
          </a>
        </li>

        <!-- 4. Вибір супергероїв у спливаючому вікні Popover -->
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popover">
            <select name="superhero" multiple>
              <option value="Batman" selected>Batman</option>
              <option value="Superman">Superman</option>
              <option value="Hulk">Hulk</option>
              <option value="Spiderman">Spiderman</option>
              <option value="Ironman">Ironman</option>
              <option value="Thor">Thor</option>
              <option value="Wonder Woman">Wonder Woman</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Super Hero</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

TECHNO4 FRAMEWORK2
- Get Started
- Boonker
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Introduction
- Page
- Infinite Scroll
- Tabs
- Swiper
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar & Tabbar
- Tooltip
- Touch Ripple
- Treeview
- Virtual List
- Elevation
- Apache Cordova Integration
- Hardware: Web Audio API & Synth
- Hardware: Web MIDI Inspector
- Hardware: Web Serial UART Terminal
- Threads Studio: Visual Workflows
- Techno4 CLI: Scaffolding Reference
- DOM64: Selector Engine
- Rollup & Vite Component Compiler
- Початок роботи
  - Тестовий підпункт
- Techno4 Total
- Threads Components
- Types

Smart Select (Розумний вибір)

Навігація