Skip to main content

Панель пошуку

Навігація

Панель пошуку

Панель пошуку дозволяє користувачу шукати в елементах List View . Або його можна використовувати як візуальний компонент інтерфейсу користувача для реалізації власного пошуку.

Макет панелі пошуку 

<div class="searchbar-backdrop"></div>
<form class="searchbar">
  <div class="searchbar-inner">
    <div class="searchbar-input-wrap">
      <input type="search" placeholder="Search" />
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
  </div>
</form>
Де::

● <div class="searchbar-input-wrap"> - оболонка для поля пошуку та кнопки очищення.

○ <input type="search" /> - поле пошуку.

○ <i class="searchbar-icon"> - значок пошуку.

○ <span class="input-clear-button"> - кнопка для очищення значення поля та скидання результатів пошуку. Неоов’язковий елемент.

● <span class="searchbar-disable-button"> - Кнопка "Скасувати" на панелі пошуку, яка дезактивує панель пошуку, скине результати пошуку та очистить поле пошуку. Необов'язковий елемент.

● <div class="searchbar-backdrop"> - напівпрозорий фон панелі пошуку, який стає видимим, коли ми вмикаємо панель пошуку. Рекомендується розміщувати цей елемент всередині page-content сторінок, що прокручуються.

Тип панелі пошуку

Тепер давайте подивимося, де ми можемо розмістити панель пошуку в структурі сторінки. Є кілька варіантів:

Фіксована панель пошуку

Фіксована панель пошуку завжди відображається на екрані незалежно від прокручування сторінки. У цьому випадку його необхідно розмістити відповідно до одного з наступних правил:

● Це може бути прямий дочірній елемент сторінки, і якщо сторінка також має фіксовані панель навігації та/або панель інструментів, тоді вона має бути ПІСЛЯ панелі навігації та панелі інструментів: 

<div class="page">
  <div class="navbar">...</div>
  <div class="toolbar toolbar-bottom">...</div>
  <!-- Панель пошуку йде після панелі навігації та панелі інструментів -->
  <form class="searchbar">...</form>
  <div class="page-content">
    <!--Фоновий шар панелі пошуку -->
    <div class="searchbar-backdrop"></div>
    <!-- Вміст сторінки тут -->
  </div>
</div>
● Його можна розмістити всередині Subnavbar, яка знаходиться всередині Navbar (рекомендований спосіб):
<div class="page page-with-subnavbar">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      ...
      <div class="subnavbar">
        <!--Панель пошуку всередині Subnavbar -->
        <form class="searchbar">...</form>
      </div>
    </div>
  </div>
  <div class="page-content">
    <!--Фоновий шар панелі пошуку -->
    <div class="searchbar-backdrop"></div>
    <!-- Вміст сторінки тут -->
  </div>
</div>

Статична панель пошуку

У цьому випадку панель пошуку є лише частиною вмісту сторінки, яку можна прокручувати:
<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <!-- Фоновий шар панелі пошуку -->
    <div class="searchbar-backdrop"></div>
    <!-- Панель пошуку є частиною вмісту сторінки, яку можна прокручувати -->
    <form class="searchbar">...</form>
    <!-- Вміст сторінки тут-->
  </div>
</div>

Панель пошуку, що розгортається

Панель пошуку, що розгортається, прихована, коли вимкнена, і стає видимою, коли ми її вмикаємо. Його компонування досить суворе, його потрібно розмістити всередині Navbar:
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left">...</div>
      <div class="title">...</div>
      <div class="right">
        <!-- Посилання для ввімкнення панелі пошуку -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
          <i class="icon t4-icons if-not-md">search</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <!-- Панель пошуку є прямим дочірнім елементом "navbar-inner"-->
      <form class="searchbar searchbar-expandable">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Search" />
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancel</span>
        </div>
      </form>
    </div>
  </div>
  <!-- Прокручуваний вміст сторінки-->
  <div class="page-content">...</div>
</div>
Де:

● <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">- посилання для ввімкнення/розгортання панелі пошуку. За бажанням або можна розмістити в будь-якому іншому місці. Атрибут data-searchbar містить селектор CSS панелі пошуку для ввімкнення.

● Панель пошуку має додатковий searchbar-expandableклас. Це необхідно для роботи панелі пошуку, що розширюється.

Вбудована панель пошуку

Вбудована панель пошуку призначена для використання всередині інших компонентів. Має спрощену розкладку - без .searchbar-inner, і рекомендується використовувати без кнопки відключення.

Нам просто потрібно додати searchbar-inlineклас до Searchbar, щоб зробити його вбудованим 

<!-- Додатковий клас "searchbar-inline". -->
<div class="searchbar searchbar-inline">
  <div class="searchbar-input-wrap">
    <input type="search" placeholder="Search" />
    <i class="searchbar-icon"></i>
    <span class="input-clear-button"></span>
  </div>
</div>

Класи поведінки панелі пошуку

Існує також кілька класів CSS, які можна додати до елементів, які визначатимуть їх поведінку, коли панель пошуку активна:

● searchbar-hide-on-enable- елементи з таким класом на сторінці будуть приховані, коли панель пошуку включена

● searchbar-hide-on-search- елементи з таким класом на сторінці будуть приховані під час пошуку

● searchbar-not-found- елементи з таким класом приховані за замовчуванням і стають видимими, коли немає результатів пошуку

● searchbar-found- елементи з таким класом видимі за замовчуванням і стають прихованими, коли немає результатів пошуку

● searchbar-ignore- панель пошуку не враховуватиме ці елементи в результатах пошуку

Наприклад: 
<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>
    <form class="searchbar">...</form>

    <!-- Наступний заголовок блоку та блок будуть приховані під час пошуку -->
    <div class="block-title searchbar-hide-on-search">Some block title</div>
    <div class="block">Lorem ipsum dolor sit amet...</div>

    <!-- Ми виконуємо пошук у списку супергероїв, тому наступна назва та список мають бути видимими під час пошуку -->
    <div class="block-title searchbar-found">Super Heroes</div>
    <div class="list simple-list searchbar-found">
      <ul>
        <li>Hulk</li>
        <li>Batman</li>
        <li>Superman</li>
        ...
      </ul>
    </div>

    <!-- Цей список буде видимим, якщо в ньому немає результатів пошуку -->
    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
  </div>
</div>

Методи застоснку панелі пошуку

Тепер, коли у нас є HTML панелі пошуку, нам потрібно його ініціалізувати. Нам потрібно використовувати методи пов’язаного застосунку:
МетодОпис
app.searchbar.create(parameters)
Ініціалізація панелі пошуку з параметрами

parameters - object -об'єкт з параметрами панелі пошуку

Метод повертає ініціалізований екземпляр Searchbar

app.searchbar.destroy(el)
Знищити екземпляр Searchbar

● el - HTMLElement or string (with CSS Selector) or object. Елемент Searchbar або екземпляр Searchbar для знищення.

app.searchbar.get(el)
Отримати екземпляр панелі пошуку за елементом HTML

● el - HTMLElement or string (with CSS Selector) or object. Елемент панелі пошуку.

Метод повертає екземпляр Searchbar

app.searchbar.clear(el)
Очистити введення тексту на панелі пошуку

● el - HTMLElement or string (with CSS Selector) or object. Елемент панелі пошуку.

Метод повертає екземпляр Searchbar

app.searchbar.enable(el)
Увімкнути панель пошуку

● el - HTMLElement or string (with CSS Selector) or object. Елемент панелі пошуку.

Метод повертає екземпляр Searchbar

app.searchbar.disable(el)
Вимкнути панель пошуку

● el - HTMLElement or string (with CSS Selector) or object. Елемент панелі пошуку.

Метод повертає екземпляр Searchbar

app.searchbar.toggle(el)
Перемкнути панель пошуку: увімкнути, якщо вона була вимкнена, або вимкнути, якщо вона була ввімкнена

● el - HTMLElement or string (with CSS Selector) or object. Елемент панелі пошуку.

Метод повертає екземпляр Searchbar

app.searchbar.search(el, query)
Запустити панель пошуку для пошуку query

● el - HTMLElement or string (with CSS Selector) or object. Елемент панелі пошуку.

query - stringПошуковий запит

Метод повертає екземпляр Searchbar

Параметри панелі пошуку

Давайте подивимося на список усіх доступних параметрів, необхідних для створення/ініціалізації панелі пошуку:
ПараметрЗа замовчуваннямОписТип
el
Селектор CSS або елемент HTML елемента панелі пошуку (form class="searchbar")
HTMLElement

string

inputEl
Селектор CSS або елемент HTML елемента введення панелі пошуку. За замовчуванням (якщо не прийнято) спробує шукати input type="search"всередині панелі пошуку
HTMLElement

string

disableButton
true
Вмикає кнопку вимкнення
boolean
disableButtonEl
Селектор CSS або елемент HTML кнопки вимкнення панелі пошуку. За замовчуванням (якщо не передано) намагатиметься шукати елемент із search-disable-button класом усередині панелі пошуку
HTMLElement

string

searchContainer
Селектор CSS або елемент HTML блоку списку для пошуку
HTMLElement

string

searchIn
Селектор CSS поля елемента List View, де нам потрібно шукати. Зазвичай ми шукаємо за назвами елементів, у цьому випадку нам потрібно передати .item-title. Також можна передати кілька елементів для пошуку типу.item-title, .item-text
string
searchItem
li
Селектор CSS окремого елемента пошуку. Якщо ми виконуємо пошук у режимі List View, це має бути один елемент списку li
string
searchGroup
.list-group
Селектор CSS елемента групи. Використовується, якщо hideGroups ввімкнено, щоб приховати групи. Якщо ми виконуємо пошук у режимі перегляду списку, то зазвичай це група списку.
string
searchGroupTitle
.list-group-title
CSS селектор назв груп. Використовується, якщо hideGroupTitles ввімкнено, щоб приховати назви груп. Якщо ми виконуємо пошук у режимі перегляду списку, то зазвичай це заголовок групи списку.
string
foundEl
.searchbar-found
Селектор CSS або HTMLElement елемента "знайдено" панелі пошуку, щоб зробити його прихованим, коли немає результатів пошуку
string

HTMLElement

notFoundEl
.searchbar-not-found
Селектор CSS або HTMLElement елемента "not-found" панелі пошуку, щоб зробити його видимим, коли немає результатів пошуку
string

HTMLElement

hideOnEnableEl
.searchbar-hide-on-enable
Селектор CSS або HTMLElement елементів, які будуть приховані, коли панель пошуку ввімкнено
string

HTMLElement

hideOnSearchEl
.searchbar-hide-on-search
Селектор CSS або HTMLElement елементів, які будуть приховані під час пошуку на панелі пошуку
string

HTMLElement

backdrop
Вмикає елемент тла панелі пошуку. За замовчуванням вимкнено для вбудованої панелі пошуку
boolean
backdropEl
Селектор CSS або HTMLElement елемента тла панелі пошуку. Якщо не передано, а backdrop параметр є true, шукатиметься .searchbar-backdropелемент. Якщо нічого не знайдено, він створить його автоматично
string

HTMLElement

ignore
.searchbar-ignore
Селектор CSS для елементів, які ігноруються панеллю пошуку та завжди присутні в результатах пошуку
string
customSearch
false
Якщо ввімкнути пошукову панель, пошук не здійснюватиметься в жодному з блоків списку, указаних у , searchContainer і ви зможете використовувати функцію спеціального пошуку, наприклад, для виклику зовнішніх API із результатами пошуку та для їх відображення вручну
boolean
removeDiacritics
false
Увімкнути видалення/заміну діакритики (á, í, ó тощо) під час пошуку
boolean
hideGroupTitles
true
Якщо ввімкнено, пошук враховуватиме заголовки груп і приховуватиме їх, якщо одразу після них не знайдено жодного елемента
boolean
hideGroups
true
Якщо ввімкнено, пошук розглядатиме групи перегляду списку та приховуватиме їх, якщо всередині цих груп немає знайдених елементів
boolean
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад
object
 
var searchbar = app.searchbar.create({
  el: '.searchbar',
  on: {
    enable: function () {
      console.log('Searchbar enabled')
    }
  }
})

Методи та властивості панелі пошуку

Щоб створити панель пошуку, ми повинні викликати:
var searchbar = app.searchbar.create({ /* parameters */ })
Після ініціалізації панелі пошуку ми маємо її ініціалізований екземпляр у змінній (як searchbar у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
searchbar.params
Об'єкт із переданими параметрами ініціалізації
searchbar.query
Поточний пошуковий запит (пошукове значення)
searchbar.previousQuery
Попередній пошуковий запит (пошукове значення)
searchbar.searchContainer
Пошуковий контейнер панелі пошуку
searchbar.$searchContainer
Елемент Dom64 із пошуковим контейнером панелі пошуку
searchbar.el
HTML-елемент панелі пошуку.
searchbar.$el
Елемент Dom64 з елементом HTML панелі пошуку.
searchbar.inputEl
HTML-елемент введення панелі пошуку
searchbar.$inputEl
Елемент Dom64 із HTML-елементом для введення в панель пошуку
searchbar.enabled
Логічне значення, яке представляє, увімкнено чи вимкнено панель пошуку
searchbar.expandable
Логічне значення, яке представляє, розгортається панель пошуку чи ні
Методи
МетодОпис
searchbar.search(query);
Примусово шукати панель пошуку за переданим запитом
searchbar.enable();
Увімкнути/активувати панель пошуку
searchbar.disable();
Вимкнути/вимкнути панель пошуку
searchbar.toggle();
Перемкнути панель пошуку
searchbar.clear();
Очистити пошуковий запит і оновити результати
searchbar.destroy();
Знищити екземпляр панелі пошук
searchbar.on(event, handler)
Додати обробник подій
searchbar.once(event, handler)
Додайте обробник подій, який буде видалено після запуску
searchbar.off(event, handler)
Видалити обробник подій
searchbar.off(event)
Видалити всі обробники для вказаної події
searchbar.emit(event, ...args)
Запустити подію на примірнику

Події панелі пошуку

Панель пошуку запускатиме такі події DOM в елементі панелі пошуку та події в екземплярі застосунку та панелі пошуку:

Події DOM

ПодіяОб'єктОпис
searchbar:search
Елемент панелі пошуку

<form class="searchbar">

Подія буде ініційована під час пошуку (зміна поля пошуку). Деталь події ( e.detail) містить об’єкт із властивостями query і previousQuery
searchbar:clear
Елемент панелі пошуку

<form class="searchbar">

Подія буде ініційована, коли користувач клацне елемент «очистити» панелі пошуку (a href="#" class="searchbar-clear"). Деталі події (e.detail) містять попередній пошуковий запит (до очищення).
searchbar:enable
Елемент панелі пошуку

<form class="searchbar">

Подія буде запущена, коли панель пошуку стане активною/увімкненою
searchbar:disable
Елемент панелі пошуку

<form class="searchbar">

Подія буде ініційована, коли панель пошуку стає вимкненою/неактивною – коли користувач натискає кнопку «Скасувати» (a href="/searchbar-cancel") або елемент "searchbar-overlay"
searchbar:beforedestroy
Елемент панелі пошуку

<form class="searchbar">

Подія буде запущена безпосередньо перед тим, як екземпляр Searchbar буде знищено

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

Екземпляр панелі пошуку запускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом searchbar.
ПодіяАргументОписОб'єкт
search
(searchbar, query, previousQuery)
Подія буде ініційована під час пошуку (зміна поля пошуку). Як аргумент обробник події отримує екземпляр панелі пошуку, поточний запит і попередній запит
searchbar
searchbarSearch
(searchbar, query, previousQuery)
Подія буде ініційована під час пошуку (зміна поля пошуку). Як аргумент обробник події отримує екземпляр панелі пошуку, поточний запит і попередній запит
app
clear
(searchbar, previousQuery)
Подія буде ініційована, коли користувач клацне елемент «очистити» панелі пошуку. Як аргумент обробник події отримує екземпляр панелі пошуку та попередній (до очищення) запит
searchbar
searchbarClear
(searchbar, previousQuery)
Подія буде ініційована, коли користувач клацне елемент «очистити» панелі пошуку. Як аргумент обробник події отримує екземпляр панелі пошуку та попередній (до очищення) запит
app
enable
(searchbar)
Подія буде запущена, коли панель пошуку стане активною/увімкненою. Як аргумент обробник події отримує екземпляр панелі пошуку
searchbar
searchbarEnable
(searchbar)
Подія буде запущена, коли панель пошуку стане активною/увімкненою. Як аргумент обробник події отримує екземпляр панелі пошуку
app
disable
(searchbar)
Подія буде запущена, коли панель пошуку стане неактивною/вимкненою. Як аргумент обробник події отримує екземпляр панелі пошуку
searchbar
searchbarDisable
(searchbar)
Подія буде запущена, коли панель пошуку стане неактивною/вимкненою. Як аргумент обробник події отримує екземпляр панелі пошуку
app
beforeDestroy
(searchbar)
Подія буде запущена безпосередньо перед тим, як екземпляр Searchbar буде знищено
searchbar
searchbarBeforeDestroy
(searchbar)
Подія буде запущена безпосередньо перед тим, як екземпляр Searchbar буде знищено
app

Автоматична ініціалізація панелі пошуку

Якщо вам не потрібно використовувати API панелі пошуку, а панель пошуку знаходиться всередині сторінки та представлена в DOM на момент ініціалізації сторінки, тоді її можна автоматично ініціалізувати, просто додавши додатковий клас searchbar-init до елемента панелі пошуку, і всі необхідні параметри можна передати за допомогою data- атрибутів:
<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>

    <!-- Панель пошуку з класом "searchbar-init" для автоматичної ініціалізації та параметрами searchContainer, searchIn, переданими в атрибутах data-  -->
    <form class="searchbar searchbar-init" data-search-container=".search-here">
      ...
    </form>

    <div class="list simple-list search-list searchbar-found">
      <ul>
        <li>Hulk</li>
        <li>Batman</li>
        <li>Superman</li>
        ...
      </ul>
    </div>

    ...
  </div>
</div>
Параметри, які використовуються в camelCase, наприклад searchContainer , в атрибутах data, повинні використовуватися в kebab-case як data-search-container

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  /*
  --t4-searchbar-link-color: var(--t4-bars-link-color);
  --t4-searchbar-inline-input-font-size: var(--t4-searchbar-input-font-size);
  */
  --t4-searchbar-input-border-width: 0px;
  --t4-searchbar-input-border-color: transparent;
}
.ios {
  /*
  --t4-searchbar-bg-color: var(--t4-bars-bg-color);
  --t4-searchbar-bg-color-rgb: var(--t4-bars-bg-color-rgb);
  --t4-searchbar-border-color: var(--t4-bars-border-color);
  */
  --t4-searchbar-height: 44px;
  --t4-searchbar-inner-padding-left: 8px;
  --t4-searchbar-inner-padding-right: 8px;
  /*
  --t4-searchbar-link-color: var(--t4-bars-link-color, var(--t4-theme-color));
  */
  --t4-searchbar-input-font-size: 17px;
  --t4-searchbar-input-border-radius: 8px;
  --t4-searchbar-input-height: 32px;
  --t4-searchbar-inline-input-height: 32px;
  /*
  --t4-searchbar-inline-input-border-radius: var(--t4-searchbar-input-border-radius);
  */
  --t4-searchbar-input-padding-horizontal: 28px;
  /*
  --t4-searchbar-inline-input-padding-horizontal: var(--t4-searchbar-input-padding-horizontal);
  --t4-searchbar-input-clear-button-color: var(--t4-input-clear-button-color);
  */
  --t4-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  --t4-searchbar-in-page-content-margin: 0px;
  --t4-searchbar-in-page-content-box-shadow: none;
  --t4-searchbar-in-page-content-border-radius: 0;
  --t4-searchbar-in-page-content-input-border-radius: 0;
  --t4-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
  --t4-searchbar-input-text-color: #000;
  --t4-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --t4-searchbar-input-bg-color: #e4e4e4;
}
.ios .dark,
.ios.dark {
  --t4-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
  --t4-searchbar-input-text-color: #fff;
  --t4-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  --t4-searchbar-input-bg-color: #2a2a2a;
}
.md {
  --t4-searchbar-border-color: transparent;
  --t4-searchbar-height: 48px;
  --t4-searchbar-inner-padding-left: 8px;
  --t4-searchbar-inner-padding-right: 8px;
  --t4-searchbar-input-font-size: 16px;
  --t4-searchbar-input-border-radius: 24px;
  --t4-searchbar-input-height: 48px;
  --t4-searchbar-inline-input-height: 48px;
  --t4-searchbar-inline-input-border-radius: 24px;
  --t4-searchbar-input-padding-horizontal: 16px;
  --t4-searchbar-inline-input-padding-horizontal: 16px;
  --t4-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  --t4-searchbar-in-page-content-margin: 16px 0;
  --t4-searchbar-in-page-content-box-shadow: none;
  --t4-searchbar-in-page-content-border-radius: 24px;
  --t4-searchbar-in-page-content-input-border-radius: 24px;
  --t4-searchbar-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-searchbar-link-color: var(--t4-md-on-surface);
  --t4-searchbar-search-icon-color: var(--t4-md-on-surface);
  --t4-searchbar-input-clear-button-color: var(--t4-md-on-surface);
  --t4-searchbar-placeholder-color: var(--t4-md-on-surface-variant);
  --t4-searchbar-input-bg-color: var(--t4-md-secondary-container);
  --t4-searchbar-input-text-color: var(--t4-md-on-surface);
}

Приклади 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Searchbar</div>
      <div class="subnavbar">
        <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search" />
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>

    <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios search-list searchbar-found">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Acura</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Audi</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">BMW</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Cadillac </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Chevrolet </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Chrysler </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Dodge </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Ferrari </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Ford </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">GMC </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Honda</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Hummer</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Hyundai</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Infiniti </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Isuzu </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Jaguar </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Jeep </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Kia</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lamborghini </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Land Rover</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lexus </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lincoln </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lotus </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mazda</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mercedes-Benz</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mercury </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mitsubishi</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Nissan </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Oldsmobile </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Peugeot </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Pontiac </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Porsche</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Regal</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Saab </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Saturn </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Subaru </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Suzuki </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Toyota</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Volkswagen</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Volvo</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
Панель пошуку, що розгортається 
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left sliding">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title sliding">Searchbar</div>
      <div class="right">
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
          <i class="icon t4-icons if-not-md">search</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <form data-search-container=".search-list" data-search-in=".item-title"
        class="searchbar searchbar-expandable searchbar-demo searchbar-init">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Search" />
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancel</span>
        </div>
      </form>
    </div>
  </div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios search-list searchbar-found">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Acura</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Audi</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">BMW</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Cadillac </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Chevrolet </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Chrysler </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Dodge </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Ferrari </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Ford </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">GMC </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Honda</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Hummer</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Hyundai</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Infiniti </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Isuzu </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Jaguar </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Jeep </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Kia</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lamborghini </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Land Rover</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lexus </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lincoln </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Lotus </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mazda</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mercedes-Benz</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mercury </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Mitsubishi</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Nissan </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Oldsmobile </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Peugeot </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Pontiac </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Porsche</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Regal</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Saab </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Saturn </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Subaru </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Suzuki </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Toyota</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Volkswagen</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Volvo</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Techno4 Framework