05 марта 2011 :Как написать яваскрипт для обработки opensearch подсказок

Итак, в статье о том как настроить opensearch, я упомянула, о том, что поисковые подсказки в формате json можно использовать и на сайте. Давайте посмотрим как это сделать.

Для начала, вам нужен Jquery, писать всё на native js очень долго, а вам потребуются всяческие селекторы и анимации.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Для того, чтобы у какого-то текстового поля отслеживать когда в нём печатают, а когда нет - неплохо использовать следующий код:

//подготовка перед функциями
var typingTimer;                //таймер
var doneTypingInterval = 1000;  //время в мс, 1 секунда для примера

//когда клавиша поднята, начинаем отсчёт
$('#myInput').keyup(function(){
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//когда клавиша нажата, сбрасываем счётчик
$('#myInput').keydown(function(){
    clearTimeout(typingTimer);
});

//пользователь "закончил печатать" обрабатываем
function doneTyping () {
    //do something
}

Яндекс в качестве задержки использует число 42, я последовала его примеру =).

Мой друг попросил, чтобы подсказки изчезали, если кликнуть где-то на странице. (и снова появлялись если кликнуть по ним). Событие при клике event.stopPropagation(); - позволяет не передавать уведомление о том что произошёл клик от дочерних элементов родительским. Иначе документ всегда будет обрабатывать событие onclick

$('html').click(function(){
        $('#search_suggestion').hide();
});

$('#search_suggestion').click(function(event){
        if(suggest_count)
                $('#search_suggestion').show();
        event.stopPropagation();
});

Чтобы спозиционировать список с подсказками возле поле ввода, я использую функцию, для определения его координат.

function getDim(el){
        for (var lx=0,ly=0;el!=null;
                lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
        return {x:lx,y:ly}
}

Используя эти координаты, вы легко можете создать список в нужном месте.

if(document.getElementById('search_suggestion')==null){
        pa=document.getElementById('opensearch_input');
        rr=getDim(pa);
        var pos_left = rr.x;
        var pos_top = (rr.y + pa.offsetHeight);
        $('<ul id="search_suggestion"></ul>').appendTo('body').css({'display':'none', 'position':'absolute', 'left':pos_left, 'top':Math.ceil(pos_top)});
}

Чтобы при загрузке страницы курсор ввода текста сразу стоял в поле быстрого поиска - вам нужно в обработке $(window).load(function() использовать следующие функции:

$(window).load(function(){
        $("#opensearch_input").focus();
        $("#opensearch_input").select();
...

Чтобы загрузить данные в формате JSON удобно вместо функций $.get или $.load использовать функцию $.getJSON

        function doneTyping (){
                $.getJSON(search_suggestion_url+$("#opensearch_input").attr("value"), show_suggestion);
        }

Ваш скрипт подсказок opensearch, может передать данные содержащие теги, кавычки и т.п., чтобы сделать это, вероятно, будет использоваться htmlspecialchars в php. Чтобы отобразить текст в нужном виде, вам понадобиться обратная функция

function unhtml(s){
        return s.toString().replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"');
}

Ну, и наконец пользователю будет приятно перемещаться по подсказкам с помощью стрелочек клавиатуры. Для того чтобы отследить нажатия клавиш, вы должны в обработчике $("#opensearch_input").keydown(function(I)  - проверять значения 38 (стрелочка вниз) и 40 (стрелочка вверх). Программисты из яндекса (на странице http://ya.ru) использовали следующую проверку

switch(I.keyCode) {
        case 18:case 9: break;
        case 38:case 40:
                I.preventDefault();
                if(suggest_count)
                key_activate(I.keyCode-39)
        ...
}

тогда функция key_activate будет содержать в качестве параметра -1 (стрелка вверх)  или 1 (стрелка вниз). 

Вы также можете обрабатывать значения 13 - Enter, 27 - Escape, и другие. Не забудьте ещё добавить вашей формы стили ссылкам при наведении мыши и т.п.

Надеюсь эта статья вам сильно сэкономит время, или просто будет полезна для изучения =)