Мини поиск — строка поиска на сайте - 13 июля 2015

Адаптация интерфейса для мобильных устройств часто требует минимизации элементов. К числу таких элементов относится строка поиска. В этой статье рассмотрим создание «мини-поиска» — компактного и динамичного варианта строки поиска для сайта.

Три состояния мини-поиска
Дизайн нашего мини-поиска будет меняться в зависимости от действий пользователя. Выделим три основных состояния:

Состояние	Описание
Пассивное	Строка поиска скрыта, виден только значок лупы (иконка поиска).
Промежуточное	Строка поиска отображена, но поле ввода пустое. Поиск ещё не активирован (пользователь нажал на значок, но не начал ввод).
Активное	Пользователь начал вводить текст в строку поиска. Значок лупы меняет функцию: теперь это кнопка для отправки запроса.

План работ
Для реализации потребуется выполнить следующие шаги:

Создать HTML-разметку формы мини-поиска.
Задать CSS-стили для строки поиска, значка и его активного состояния.
Реализовать с помощью jQuery открытие строки поиска при клике на значок.
Реализовать закрытие строки поиска при повторном клике на значок.
Запрограммировать активацию кнопки поиска (смену её функции) при вводе данных в строку.

1. HTML-разметка формы
Разместим на странице базовую структуру нашего мини-поиска.

2. CSS-стили для мини-поиска
Зададим внешний вид элементам. Стили охватывают контейнер, строку ввода, кнопку и их состояния.

/* Стили для контейнера и значка */
#welcome2 .arrm {
    padding: 0;
    height: 38px;
    width: 38px;
    text-align: center;
    border: 1px solid transparent;
}

#welcome2.prover .arrm {
    border: 1px solid #636E75;
    color: #636E75;
}

#welcome2 > ul {
    text-align: right;
    position: absolute;
    top: 0px;
    right: 40px;
    width: 262px;
    display: none;
    background: none;
    height: 40px;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Стили для строки поиска */
#search {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 260px;
    z-index: 7;
}

#search .button-search {
    position: absolute;
    left: 262px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10001;
    line-height: 40px;
    background: #636E75;
    color: #fff;
    text-align: center;
}

#search input {
    margin: 0;
    background: #FFF;
    padding: 0 10px;
    width: 240px;
    height: 38px;
    border: 1px solid #636E75;
}

#search input:focus {
    outline: none;
}

/* Адаптация для мобильных устройств */
@media (max-width: 767px) {
    #welcome2 > ul {
        right: 60px;
    }
    #search {
        width: 180px;
    }
    #search input {
        width: 160px;
    }
    #search .button-search {
        left: 180px;
    }
}

3. Программная часть на jQuery
Для работы скриптов необходима предварительно подключённая библиотека jQuery.

// Проверка заполненности строки при загрузке страницы
// (актуально, если пользователь перешёл по ссылке с уже заданным поисковым запросом)
if($("#search input").val().length > 0) {
    $("#search .button-search").css('display','block');
} else {
    $("#search .button-search").css('display','none');
}

// Активация/деактивация кнопки поиска при вводе текста
$("#search input").on("keyup", function() {
    if($("#search input").val().length > 0) {
        $("#search .button-search").css('display','block');
    } else {
        $("#search .button-search").css('display','none');
    }
});

// Закрытие строки поиска при клике в любом месте страницы, кроме неё самой
$(document).click(function (e) {
    var div = $(".prover");
    if (!div.is(e.target) && div.has(e.target).length === 0) {
        div.children('ul').css('display','none');
        div.removeClass("prover");
    }
});

Представленное решение позволяет создать компактную, интуитивно понятную и адаптированную для мобильных устройств строку поиска. Динамическое изменение её состояния улучшает пользовательский опыт, делая взаимодействие с сайтом более удобным.