Мини поиск — строка поиска на сайте

Мини-поиск: создаем динамичный дизайн для строки поиска на сайте. Адаптация к мобильным часто требует минимизации элементов. К ряду таких элементов относится строка поиска.

На картинке: строка поиска на сайте интернет-магазина угг uggmoda.ru

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

1. Пассивный — строка поиска не видна, доступен только значок поиска
2. Промежуточное состояние мини поиска — строка поиска видна, но поиск по-прежнему неактивен: посетитель нажал значок поиска, но еще ничего не ввел в строку.
3. Активный мини поиск — посетитель начал вводить какие-то символы в строку поиска. Активируется кнопка поиска на месте значка, который без активации служит открытию/закрытию строки поиска — а при активации становится действующей кнопкой самого поиска.

Итак, нам надо выполнить следующие работы:

• Прописать в html форму мини поиска.
• Задать стили css для строки поиска, значка мини поиска и активного значка мини поиска.
• Спрограммировать вывод строки поиска при нажатии на значок.
• Спрограммировать закрытие строки поиска (убирается с зоны видимости) при нажатии на значок.
• Спрограммировать активацию значка поиска при вводе в строку поиска каких-то данных.

Всю программную часть мы будем выполнять скриптами jquery. Стили пропишем в CSS. А сейчас пропишем html форму мини поиска на странице:

<div id="welcome2">
<span class="arrm"><i class="ugg-search74"></i></span>
<ul><div id="search">
<div class="button-search" style="display: none;"><i class="ugg-search74"></i></div>
<input type="text" name="search" placeholder="Поиск" value="">
</div>
</ul>
</div>

Задаем стили 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}

Строка поиска (css):

#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;}

}

Программная часть мини поиска выполняется jquery-скриптами (должна быть подгружена jquery-библиотека):

<script type="text/javascript">
$(function() {

$('.arrm').click(function() {
if($(this).parent().children('ul').css('display') == 'block')
{  $(this).parent().removeClass("prover");
   $(this).parent().children('ul').css('display','none');
}
else
{$(this).parent().children('ul').css('display','block');
$(this).parent().addClass("prover");}
});

Проверяем, введено ли что-то в строку поиска изначально (тут имеется в виду, что человек перешел на страницу поиска по определенному запросу, — именно он может присутствовать при загрузке страницы). Условие «val().length>0″:

if($("#search input").val().length > 0){
$("#search .button-search").css('display','block');
}
else
{$("#search .button-search").css('display','none');}

Пишем код для активации поиска непосредственно при введении в форму каких-либо данных («keyup»). Если что-то присутствует в строке (определяется условием val.length>0) кнопка поиска активируется, или стерто, кнопка деактивируется:

$("#search input").live("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");
}
});

Закроем скрипт:

});
</script>

Ок.