Давненько как-то написал JS-скрипт «живого» поиска по сайту для uCoz. К примеру, как в Яндекс — вы вбиваете запрос, а он уже выдал вам результат и обновляет по мере, того как вы продолжаете вводить свой запрос.
— Скрипт работает на всех модулях и страницах.
— Автоматически определят по какому модулю нужно искать.
— Автоматически цепляется к любым формам поиска на странице сайта.
— Легко устанавливается, также просто можно убрать скрипт.
— Можно прописать стили и видоизменить результаты поиска под стиль вашего сайта.
Ниже привожу код скрипта, а чтобы установить живой поиск на сайт достаточно подключить скрипт перед тегом </body> на всех страницах сайта.
HTML:
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(); // запуск «живого» поиска
});Чтобы настроить внешний вид результатов поиска, нужно прописать стили в блоке — в самом конце скрипта:
HTML:
$('.search-live .search-live-item').css({
'display' : 'block',
'width' : '100%',
'height' : '40px',
// вы можете добавить любые стили в скрипт, либо прописать стили в вашем фаиле CSS
});Благодарность LisER07 за указание на ошибки!
Последнее редактирование:
