Как сделать поиск с подсказками

Как сделать поиск с подсказками

В свое время была задача реализовать поисковую строку на сайте, которая бы работала не просто как поиск, а при попытке введении запроса выдавала бы подсказки-ссылки на конкретные страницы сайта. 

Делается достаточно просто

  •  Через jQuery на событие keyup вешается функция отправки уже введенных пользователем данных при помощи Ajax’a на php-скрипт (+ здесь же можно реализовать проверку того, что алгоритм начнет работать только если пользователь ввел 3 или более символов)
  • Пишется php скрипт, который находит в базе данных или из введенного вами перечня (можно даже из файла) подходящие результаты
  • Через Ajax возвращаются результаты

Пример возможного кода:

<form id="form">
     <input type="text" id="searchForm">
     <ul id="searchHelper" style="display: none;"></ul>
</form>

<script type="text/javascript">
    $('#searchForm').keyup(function(){
        if($(this).val().length>3){
	    //заместо адреса можно перенаправлять на текущую страницу, при условии что на ней вызывается сниппет, перехватывающий ajax-значения
	    $.get('адрес_до_пхп_файла',{'query':$(this).val()},function(data){
	         data = eval('('+data+')');
		 if(data.length!=undefined && data.length>0){
		    $("#searchHelper").html('');
	                for(i in data){
			    $('#searchHelper').append('<li>'+data[i]+'</li>');
			}
			$('#searchHelper').css('display', 'block');
		     }
	    });
	}
    });

$('#searchHelper > li').live('click',function(){
    $('#searchForm').val($(this).text());
    $('#form').submit();
});
</script>