private:koding:hostcms:modules:shop:useful:autocomplete
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
private:koding:hostcms:modules:shop:useful:autocomplete [25.11.15 в 13:27] san-ma_yandex.ru создано |
private:koding:hostcms:modules:shop:useful:autocomplete [27.06.17 в 15:57] (current) maximzasorin_gmail.com ↷ Страница перемещена из private:koding:hostcms:shop:autocomplete в private:koding:hostcms:modules:shop:useful:autocomplete |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | {{:private:koding:hostcms:shop:12e3.jpg?200|}} | + | ====== Автодополнение в строке поиска ====== |
| + | |||
| + | |||
| + | В этой статье описано, как реализовать такое автодополнение вариантов поиска в редакции Халява | ||
| + | {{:private:koding:hostcms:shop:12e3.jpg|}} | ||
| + | |||
| + | такую функцию выполняет плагин Autocomplete | jQuery UI. | ||
| + | |||
| + | Свежую версию плагина можно скачать на Github'е: https://github.com/devbridge/jQuery-Autocomplete | ||
| + | |||
| + | - Необходимо добавить загруженные файлы скрипта и стилей на сервер ''styles.css'' и ''jquery.autocomplete.min.js'' в папки ''css'' и ''js'' соответственно. | ||
| + | - Подключить эти файлы в основном макете сайта | ||
| + | - В основной макет сайта в блок ''head'' добавить следующий код: <code html> | ||
| + | <script type="text/javascript"> | ||
| + | $(function() { | ||
| + | //для строки поиска в шапке | ||
| + | $('#search_text).autocomplete({ | ||
| + | serviceUrl: '/shop/?autocomplete=1', // Страница для обработки запросов автозаполнения | ||
| + | minChars: 1, // Минимальная длина запроса для срабатывания автозаполнения | ||
| + | maxHeight: 300, // Максимальная высота списка подсказок, в пикселях | ||
| + | width: 200, // Ширина списка | ||
| + | zIndex: 9999, // z-index списка | ||
| + | deferRequestBy: 300, // Задержка запроса (мсек) | ||
| + | // Дополнительные параметры | ||
| + | onSelect: function (suggestion) { | ||
| + | $(this).closest("form").submit(); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | </script></code> | ||
| + | - Для ''<input>'', у которого должен выводиться выпадающий список добавляете ''id="search_text"'' | ||
| + | - В ТДС, в Настройки страницы интернет магазина добавить код: (данный пример кода ищет варианты автозаполнения по имени и артикулу) <code php> | ||
| + | |||
| + | /** | ||
| + | * Поиск товаров для автозаполнения | ||
| + | * | ||
| + | * @author Malinovskii Aleksandr, KAD Systems (©) 2015 | ||
| + | * @date 24-11-2015 | ||
| + | * Начало >> | ||
| + | */ | ||
| + | |||
| + | if (Core_Array::getGet('autocomplete')) | ||
| + | { | ||
| + | $aResultJson = array(); | ||
| + | $sQuery=Core_Array::getGet('query'); | ||
| + | |||
| + | $aResultJson['query'] = $sQuery; | ||
| + | $aResultJson['suggestions'] = array(); | ||
| + | |||
| + | //ищем совпадающие запросу имена | ||
| + | $aResultName = Core_QueryBuilder::select(array('shop_items.name', 'value')) | ||
| + | ->from('shop_items') | ||
| + | ->where('shop_items.name', 'LIKE', '%'.$sQuery.'%') | ||
| + | ->setAnd() | ||
| + | ->where('shop_items.shop_id', '=', '5')->setAnd() | ||
| + | ->where('shop_items.active', '=', '1')->setAnd() | ||
| + | ->where('shop_items.deleted', '=', '0'); | ||
| + | |||
| + | //аналогично ищем артикули | ||
| + | $aResultMarking = Core_QueryBuilder::select(array('shop_items.marking', 'value')) | ||
| + | ->from('shop_items') | ||
| + | ->where('shop_items.marking', 'LIKE', '%'.$sQuery.'%') | ||
| + | ->setAnd() | ||
| + | ->where('shop_items.shop_id', '=', '5')->setAnd() | ||
| + | ->where('shop_items.active', '=', '1')->setAnd() | ||
| + | ->where('shop_items.deleted', '=', '0'); | ||
| + | |||
| + | |||
| + | $aResultJson['suggestions'] = array_merge($aResultName->execute()->asAssoc()->result(), $aResultMarking->execute()->asAssoc()->result()) ; | ||
| + | |||
| + | echo json_encode($aResultJson); | ||
| + | exit(); | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * << Конец | ||
| + | * @author Malinovskii Aleksandr, KAD Systems (©) 2015 | ||
| + | * @date 24-11-2015 | ||
| + | */ | ||
| + | </code> | ||
private/koding/hostcms/modules/shop/useful/autocomplete.1448447261.txt.gz · Last modified: 25.11.15 в 13:27 by san-ma_yandex.ru
