/ Scripts & jquery / Кнопка всплывающего поиска (+ курсор в поиске)

Кнопка всплывающего поиска (+ курсор в поиске)

HIT

06.10.2015

1343

Реализуем скрытый поиск, т.е. форма поиска изначально не показана и вызывается нажатие кнопки.

Форму поиска и подложку вставляем в шапку (например, после открытия div main)

<div id="backfon"></div>
<div id="sea">

<form method="get" id="searchform" action="https://opttour.ru/">
<button type="submit" id="pic-sea" value=""><i class="fa fa-search"></i></button>
<input type=text name="s" id='s' placeholder="Поиск" />
</form>

</div>

Делаем кнопку или пункт меню с id=search-item

<li class="menu-item search-item"><a><i class="fa fa-search"></i> Поиск</a></li>

Script, различные эффекты с помощью анимации

$(document).ready(function() {

//Появление поиска + !курсор в строке поиска

$('.search-item').click(function() {

$('#sea').show();
$('#sea').removeClass('fadeOutDown');
$('#sea').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');

});


//  курсор в строку поиска
$('.search-item').click(function() {
$('#s').focus();
});


$('#backfon').click(function() {

$('#backfon').addClass('fadeOut');
$('#sea').addClass('fadeOutDown');
setTimeout(function () { $('#sea').hide(); $('#backfon').hide(); }, 500);

});

});

Либо еще один альтернативный скрипт (но нет эффекта при закрытии) — Закрытие элемента по клику за пределами его области (вне элемента)

$(document).ready(function() {

//Появление поиска + !курсор в строке поиска

$('.search-item').click(function() {

$('#sea').show();
$('#sea').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').addClass('animated fadeIn');

});

//  курсор в строку поиска
$('.search-item').click(function() {
$('#s').focus();
});


});

// Закрытие элемента по клику за пределами его области (вне элемента)

jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#sea"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		        $('#backfon').hide(); 
		}
	});
});

CSS

#backfon {
	background-color: rgba(0, 0, 0, 0.5);
	background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
}

#sea {
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 9999;
	opacity: 0;
	width: 100px;
	height: 25%;
	transition: opacity .5s ease;
	-webkit-transition: opacity 0.5s ease 0s;
}

#searchform {padding:0; background:none;}

#s {
	padding: 10px;
	transition: width .3s ease-in-out;
	-webkit-transition: width 0.3s ease-in-out 0s;
	border: none;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	z-index: 98;
}

#pic-sea {
	padding: 10px;
	border: none;
	position: absolute;
	right: 0;
	background-color: rgb(224, 22, 52);
	transition: background-color .3s ease;
	-webkit-transition: background-color 0.3s ease 0s;
	color: #fff;
	z-index: 99;
}

#pic-sea .fa {color: #fff !important;}

#pic-sea:hover {background-color: rgb(153, 8, 21);}

#searchform .fa {padding: 0 !important;}

Скрывать поиск

Скрывать поиск, если курсор больше не в поле ввода

$(document).on("focusout","#s",function(){
	$('#searchform').slideUp();
});

// или еще вариант
$('td.edit').on("blur","input",function(){
    alert("finally bye");
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Поиск по категориям

Поиск по категориям

Стандартный поиск WordPress ищет по всему сайту. Добавим в поисковую форму выбор категории сужающий сектор поиска. Поиск по категориям WordPress Для поиска по категория WP в строку запроса необходимо добавить Читать далее »

Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Кнопка всплывающего поиска (+ курсор в поиске) Кнопка всплывающего поиска (+ курсор в поиске)
Акция 20% на каждый второй и 30% на каждый 3 товар
Рекомендации для васАкция 20% на каждый второй и 30% на каждый 3 товарOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.