Пишем свой простой вариант "живого поиска".

Веб-программирование 27 февраля 2013 г., 7:34

Сегодня я напишу статью, о том как сделать простую версию так называемого «живого поиска». Для тех кто не в курсе, живой поиск — это когда при вводе искомого текста, появляется подсказка, с возможными вариантами. Примером тому служит Яндекс и Google.

 

По сути «живой поиск» это обычный AJAX скрипт, который обращается к базе данных, производит в ней поиск, и возвращает ответ скрипту. Для работы поиска я буду использовать Jquery.

 

Итак, создадим простую форму поиска:

 


<!DOCTYPE html>
<html>
<head>
    <title>Простой живой поиск</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="//yandex.st/jquery/1.7.2/jquery.min.js"></script>

    <style>
		.search_area{
			width: 350px;
			margin: 0px;
			position: relative;
		}

		#search_box{
			width:200px;
			padding:2px;
			margin:1px;
			border:1px solid #000;
		}

		#search_advice_wrapper{
			display:none;
			width: 350px;
			background-color: rgb(80, 80, 114);
			color: rgb(255, 227, 189);
			-moz-opacity: 0.95;
			opacity: 0.95;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=95);
			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=95);
			filter:alpha(opacity=95);
			z-index:999;
			position: absolute;
			top: 24px; left: 0px;
		}

		#search_advice_wrapper .advice_variant{
			cursor: pointer;
			padding: 5px;
			text-align: left;
		}
		#search_advice_wrapper .advice_variant:hover{
			color:#FEFFBD;
			background-color:#818187;
		}
		#search_advice_wrapper .active{
			cursor: pointer;
			padding: 5px;
			color:#FEFFBD;
			background-color:#818187;
		}

    </style>

</head>

<body>
	<div class="search_area">
		<form action="" method="GET">
			<input type="text" name="query" id="search_box" value="" autocomplete="off">
			<input type="submit" value="Поиск">
		</form>
		<div id="search_advice_wrapper"></div>
	</div>
</body>
</html>


Обратите внимание на autocomplete="off" у input'а, это для того чтобы отключить подсказки браузера, которые он показывает при повторном наборе текста в форме.

 

Слой <div id="search_advice_wrapper"></div> является скрытым, и будет появляться только когда будут варианты поиска.

 

Теперь займемся созданием javascript скрипта.


<script type="text/javascript">
var suggest_count = 0;
var input_initial_value = '';
var suggest_selected = 0;

$(window).load(function(){
	// читаем ввод с клавиатуры
	$("#search_box").keyup(function(I){
		// определяем какие действия нужно делать при нажатии на клавиатуру
		switch(I.keyCode) {
			// игнорируем нажатия на эти клавишы
			case 13:  // enter
			case 27:  // escape
			case 38:  // стрелка вверх
			case 40:  // стрелка вниз
			break;

			default:
				// производим поиск только при вводе более 2х символов
				if($(this).val().length>2){

					input_initial_value = $(this).val();
					// производим AJAX запрос к /ajax/ajax.php, передаем ему GET query, в который мы помещаем наш запрос
					$.get("/ajax/ajax.php", { "query":$(this).val() },function(data){
						//php скрипт возвращает нам строку, ее надо распарсить в массив.
						// возвращаемые данные: ['test','test 1','test 2','test 3']
						var list = eval("("+data+")");
						suggest_count = list.length;
						if(suggest_count > 0){
							// перед показом слоя подсказки, его обнуляем
							$("#search_advice_wrapper").html("").show();
							for(var i in list){
								if(list[i] != ''){
									// добавляем слою позиции
									$('#search_advice_wrapper').append('<div class="advice_variant">'+list[i]+'</div>');
								}
							}
						}
					}, 'html');
				}
			break;
		}
	});

	//считываем нажатие клавишь, уже после вывода подсказки
	$("#search_box").keydown(function(I){
		switch(I.keyCode) {
			// по нажатию клавишь прячем подсказку
			case 13: // enter
			case 27: // escape
				$('#search_advice_wrapper').hide();
				return false;
			break;
			// делаем переход по подсказке стрелочками клавиатуры
			case 38: // стрелка вверх
			case 40: // стрелка вниз
				I.preventDefault();
				if(suggest_count){
					//делаем выделение пунктов в слое, переход по стрелочкам
					key_activate( I.keyCode-39 );
				}
			break;
		}
	});

	// делаем обработку клика по подсказке
	$('.advice_variant').live('click',function(){
		// ставим текст в input поиска
		$('#search_box').val($(this).text());
		// прячем слой подсказки
		$('#search_advice_wrapper').fadeOut(350).html('');
	});

	// если кликаем в любом месте сайта, нужно спрятать подсказку
	$('html').click(function(){
		$('#search_advice_wrapper').hide();
	});
	// если кликаем на поле input и есть пункты подсказки, то показываем скрытый слой
	$('#search_box').click(function(event){
		//alert(suggest_count);
		if(suggest_count)
			$('#search_advice_wrapper').show();
		event.stopPropagation();
	});
});

function key_activate(n){
	$('#search_advice_wrapper div').eq(suggest_selected-1).removeClass('active');

	if(n == 1 && suggest_selected < suggest_count){
		suggest_selected++;
	}else if(n == -1 && suggest_selected > 0){
		suggest_selected--;
	}

	if( suggest_selected > 0){
		$('#search_advice_wrapper div').eq(suggest_selected-1).addClass('active');
		$("#search_box").val( $('#search_advice_wrapper div').eq(suggest_selected-1).text() );
	} else {
		$("#search_box").val( input_initial_value );
	}
}
</script>

Я постарался описать этот скрипт по максимуму в комментариях. По сути скрипт делется на несколько частей:

  1. Считываем ввод с клавиатуры, получаем данные из базы данных и выводим их
  2. Делаем скрытие слоя с подсказками, при нажатии на Escape и Enter
  3. Делаем переход по слою с подсказками, через нажатие стрелок клавиатуры ( вверх и вниз)
  4. Скрытие слоя с подсказками при клике на поле сайта и открытие его при клике на input
  5. При клике на подсказку мы вписываем слово в input поиска и прячем форму подсказки.

А теперь давайте посмотрим содержимое файла /ajax/ajax.php, к которому мы подключаемся за теми самыми подсказками.

	
	if(!empty($_GET['query'])){
		$query = (string)$_GET['query'];
		$array = array();
		$request  = $db->query("SELECT `description`, `name` FROM `prefix_name` WHERE `description` LIKE '%". $db->real_escape_string($query) . "%' OR `name` LIKE '%". $db->real_escape_string($query) . "%' LIMIT 0, 10");
		while($data =$db->fetch_assoc($request)){
			$array[] = $data['name'];
		}

		echo "['".implode("','", $array)."']";
	}
	exit();

Пример работы скрипта: https://jelu.ru/upload/tutorial/suggest/script.html

Теги: Уроки html css jquery 0


Станьте первым!

Пожалуйста, авторизуйтесь или зарегистрируйтесь для комментирования!

Яндекс.Метрика