Js-скрипт «живого» поиска по сайту для ucoz

Давненько как-то написал 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 за указание на ошибки!

 

1. error просто не удалял, думал допилить наверно.
2. var $input = $(this) — долго объяснять, но так уж сделано.

Вообще это было месяца 4-5 назад, я тогда в js плохо шарил, только учился... Второй пункт обоснован, но объяснять не буду (сам знаю, что можно все это сделать грамотнее).

 

Блин, я не хочу грубить и встревать в перепалку... но разуй глаза plz!

----
error: function($data) — это я не убрал тупо, чтобы потом не прописывать заново, если буду делать, и чтобы у меня был где-то шаблон данной функции со всеми параметрами
----
$input = $(this) — проследи всю цепочку действий/событий в скрипте, хотя тут все не совсем очевидно конечно...
----
одним ajax запросом нельзя было ? — где ты видишь два ajax Запроса? а если ты и видишь что-то, то это два РАЗНЫХ ajax запроса. видишь ли, в поиске по модулям, и в поиске по всему сайту есть различия

 

Добавил gif анимашку. А скрипт пожалуй обновлю слегка на днях, т.к. нужно преодолеть различия на сайтах и заставить это работать лучше

 

LisER07, хочешь сказат

.match() — Выполняет поиск по строке с использованием регулярного выражения и возвращает массив, содержащий результаты поиска.

 

Ты уже прокомментировал каждую строчку — мои комментарии будут излишними.

 

В данном коде нет ошибок! Да, в чем-то его можно доработать и будет более грамотно сделано, но ошибок там нет. Ты просто не прослеживаешь всю цепочку действий — что и как делается. Попробуй сам напиши и мы вместе посмотрим на твой результат Да, он может быть будет лучше, а может и наоборот — но ты для начала сделай =)

Или по-другому — ты якобы указал на мой ошибки. Если ты там нашел ошибки, то видимо ты знаешь как их исправить? Попробуй убери для начала ошибочную по твоему строку —
$input = $(this) и ты увидишь, что будет

 

А ты самый умный в сторонке стоишь и наблюдаешь?

 

... кто побеждает?