Шеф | Дата: Среда, 24-Янв-2018, 3:43:28 | Сообщение # 1 |
Директор
Группа: Главный режессер
Сообщений: 38
Статус: Offline
| JS-скрипт «живого» поиска по сайту для uCoz. К примеру, как в Яндекс — вы вбиваете запрос, а он уже выдал вам результат и обновляет по мере, того как вы продолжаете вводить свой запрос.
— Скрипт работает на всех модулях и страницах. — Автоматически определят по какому модулю нужно искать. — Автоматически цепляется к любым формам поиска на странице сайта. — Легко устанавливается, также просто можно убрать скрипт. — Можно прописать стили и видоизменить результаты поиска под стиль вашего сайта.
Ниже привожу код скрипта, а чтобы установить живой поиск на сайт достаточно подключить скрипт перед тегом </body> на всех страницах сайта.
Код var liveSearch = {
init: function() {
// цепляемся за форму поиска $('form [action]input[name]').keyup(function() { var search = $(this), form = $(this).closest('form'), query = $(this).val(), action = form.attr("action");
$('.search-live').remove(); if ( form.attr("id") == 'addEntForm' || query.length < 3 ) return false;
if ( /search|dir|publ|load|news|stuff|blog|video|photo/.test(action) === true ) { $.ajax({ url: action + '?q=' + query, type: 'POST', data: {query: query, a: 2}, success: function(data) { liveSearch.insert( data, query, search ) }, }); } });
},
insert: function(data, query, search) {
var request = '', query_exp;
$('a[href]', data).each(function(index, link){ query_exp = new RegExp(query); if( query_exp.test( $(this).text() ) == true ) request += '<a href="' + $(this).attr('href') + '" class="search-live-item">' + $(this).text() + '</a>'; });
if ( request.length == 0 ) request = '<a href="" class="search-live-item">Ничего не найдено!</a>';
$('body').prepend('<div class="search-live">' + request + '</div>');
$('.search-live').css({ 'width' : search.outerWidth(), 'position' : 'absolute', 'top' : search.offset().top + search.outerHeight(), 'left' : search.offset().left, 'z-index' : '100001', 'box-sizing' : 'border-box' });
$('.search-live .search-live-item').css({ 'display' : 'block', 'width' : '100%', 'height' : '40px', 'overflow' : 'hidden', 'background' : '#000', 'color' : '#fff', 'line-height' : '40px', 'text-indent' : '20px', 'text-decoration' : 'none', 'border-bottom' : '1px solid #ccc', 'text-align' : 'left', 'box-sizing' : 'border-box' });
}
}
$(document).ready(function() { liveSearch.init(); // запуск «живого» поиска }); или так
Код $('form [action]input[name]').keyup(function() { var $this = $(this), query = $this.val(), form = $this.closest('form'), action = form.attr("action"), actionTest = new RegExp(/search|dir|publ|load|news|stuff|blog|video|photo/).test(action), search = new RegExp(/search/).test(action); if ( form.attr('id') == 'addEntForm' ) return false; if (query.length >= 3 && actionTest === true ) { $.ajax({ url: ((search) ? action + '?q=' + query : action), type: ((search) ? 'GET' : 'POST'), data: ((search) ? {} : {query: $query, a: 2}), success: function(data){ SearchLiveInto(data, query, $this); } }); } else $('.search-live').remove(); }); Чтобы настроить внешний вид результатов поиска, нужно прописать стили в блоке — в самом конце скрипта:
Код $('.search-live .search-live-item').css({ 'display' : 'block', 'width' : '100%', 'height' : '40px', // вы можете добавить любые стили в скрипт, либо прописать стили в вашем фаиле CSS });
|
|
| |