Выпадающий список в строке поиска

[Jex]

Здравствуйте! Как создать выпадающий список слов и фраз, находящихся в базе, при вводе символов в строке поиска (однострочном текстовом поле)?

За примером далеко бегать не надо - такой эффект присутствует в поиске на этом сайте, а так же яндексе, гугле, мейле и тэдэ.

Спасибо!

[Veseloff]

Не понимаю в чём проблема. Спозиционировать блок и показать его? Или загрузить данные с сервера?

[Great Rash]

Есть БД, на событие keyup посылаем AJAX-запрос на сервер, который ищет в ней совпадения по введенным символам и возвращает результаты. Ну а дальше отображаем их собственно.

[Jex]

А есть какие-либо готовые простенькие примеры с кодом?

[Great Rash]

Конечно есть - «javascript autocomplete combobox» в Google.

[Gold Dragon]

Вот сделал небольшое пояснение

Код поля ввода

<div id="kab-mod-search">
	<input name="kabsearchword" id="kabsearchword" maxlength="50" type="text" size="25" value=""  />
	<div id="kabsearchform"></div>
</div>
<script type="text/javascript" src="mod_kabsearch.js"></script>';

файл mod_kabsearch.js

function kab_get() {
    $('#kabsearchform').fadeOut(300, function(){
	    a = $("#kabsearchword").val();
		$.get(location.protocol+'//'+location.hostname+'/ajax.php?task=mosearch', {str : a}, function(data) {
            $('#kabsearchform').html(data).fadeIn(600);
            return false;
        });
    });
}
$("#kabsearchword").keyup(function(){
    if(kab_get.timeout){
        clearTimeout(kab_get.timeout);
    }
	kab_get.timeout = setTimeout(kab_get,500);
});
$("#kabsearchword").blur(function() {
	$("#kabsearchform").fadeOut(600);
	$("#kabsearchword").val('');
});

файл ajax.php

<?php
$task = (isset($_GET['task'])) ? $_GET['task'] : '';
switch ($task) {
	case 'mosearch':
		$str = (isset($_GET['task'])) ? strip_tags(trim($_GET['str'])) : '';
		moSearch($str);
		break;
	default:
		echo '';
}
function moSearch($str) {
	$result = '';
	// получаем общее количество данных из базы
	// и присваиваем их переменной $total

	// получаем данные из базы с фильтром $str
	// и присваиваем их переменной $rows

	// листаем то что получили, но не всё, а например первые 10
	//  и выводим их допустим в использую эту структуру
	$result .= '
	<div class="mosearchresult" id="mosearchresult-'.$rows->ИДЕНТИФИКАТОР_ЗАПИСИ.'">
		<a href="ССЫЛКА_НА_ПОКАЗ ПОЛНОЙ ИНФОРМАЦИИ">'.$rows->НАЗВАНИЕ_ЧЕГО_ТО.'</a>
	</div>';
	// Далее формируем красивую форму
	$result	.= '
	<div class="mosearchresulttotal">
		'.$result.'
		<p>всего найдено: '.$total.'</p>
		<p><a href="ССЫЛКА_НА_РАСШИРЕННЫЙ_ПОИСК">расширенный поиск</a></p>
	</div>';
	echo $result;
}

если что не понятно, спрашивай, поясню.

и вот стили...

#kab-mod-search {
	margin: 0 auto;
	width: 200px;
}

#kabsearchword {
	background: #f4f4f4;
	border: solid 1px #a3a3a3;
	padding: 5px;
	font-family: Arial;
	font-weight: bold;
	-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1);
	-moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance: none; /* reset webkit search style */
	background-image: url("/components/com_gdkabak/images/search.png");
	background-position: center;
	background-repeat: no-repeat;
}

#kabsearchword:focus {
	background: #ffffcc
}

#kabsearchform {
	display: none;
	position: absolute;
	background-color: #fafafa;
	border: solid 1px #a3a3a3;
	padding: 5px 10px;
	font-family: Arial;
	-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1);
	-moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance: none; /* reset webkit search style */
	z-index: 99;
	line-height: normal;
	width: 190px;
}

.mosearchresult {
	width: 100%;
	padding: 3px;
	text-align: left;
	border-bottom: #eeeeee solid 1px;
	background-image: url("/components/com_gdkabak/images/fonsearch.png")
}

.mosearchresult a, .mosearchresulttotal a {
	font-size: 10pt;
	color: #e0742c;
	font-weight: bold;
	text-decoration: underline
}

.mosearchresulttotal {
	font-size: 10pt;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

.mosearchresult a:hover, .mosearchresulttotal a:hover {
	color: #000000;
	text-decoration: none
}

.mosearchresult span {
	font-size: 8pt;
	color: #999999;
}

Edited November 9, 2011 by Gold Dragon