Сегодня попробуем сами написать скрипт для автозаполнения поисковых форм, например как в Google или Википедии. По моему довольно удобная функция. И, как оказалось, довольно проста в реализации. Ну что же, приступим!

Система простая: при вводе в поле символа – отправляем с помощью ajax`а запрос. В серверной части обрабатываем его и выдаём. В нашем примере сделаем простой поиск по именам. Для начала создадим саму поисковую форму:

<br />
<html><br />
<head></p>
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<style type="text/css">
.searchbar {
  position: absolute;
  width: 230px;
  display: none;
  border: 1px solid #333;
}
.asearch {
  background-color: #FFFFDE;
  cursor: pointer;
  padding: 1px 0px 1px 5px;
}
</style>
<p><script language="JavaScript" src="autosearch.js" type="text/javascript"></script></p>
<p></head><br />
<body></p>
<form action="" method="post">
<input type="text" name="search" id="search" size="35" onKeyUp="ajaxSend(event,this.value)">&nbsp;</p>
<input type="submit" value="Искать">
</form>
<div class="searchbar" id="sbar"></div>
<p></body></html><br />

Пишем скрипт автозаполнения поисковых форм

Теперь по порядку. Мы имеем простую формочку, состоящую из текстового поля и кнопки. Сразу под ним – блок, где мы будем выводить результаты. Ширину, рамку и остальное меняем в классе searchbar. Класс asearch – это уже само оформления вариантов подсказки (подробнее будет дальше).

Так, с формочкой вроде разобрались. Теперь разберём что у нас будет в autosearch.js.

<br />
function sendRequest(file,_resultId,getRequestProc) {<br />
  resultId = _resultId;<br />
  document.getElementById(resultId).innerHTML = '';<br />
  httpRequest.open('get', file);<br />
  httpRequest.onreadystatechange = getRequestProc;<br />
  httpRequest.send(null);<br />
}</p>
<p>function getRequest() {<br />
  if (httpRequest.readyState==4 &#038;& httpRequest.responseText!='') {<br />
    document.getElementById(resultId).innerHTML = httpRequest.responseText;<br />
    document.getElementById('sbar').style.display = 'block';<br />
  }<br />
}</p>
<p>function m_over(obj) {<br />
  obj.style.backgroundColor='#3A4057';<br />
  obj.style.color='#FFFFFF';<br />
}<br />
function m_out(obj) {<br />
  obj.style.backgroundColor='#FFFFDE';<br />
  obj.style.color='#000000';<br />
}<br />
function m_change(val) {<br />
  document.getElementById('search').value=val;<br />
  document.getElementById('sbar').style.display='none';<br />
}</p>
<p>function ajaxSend(event,text) {<br />
  if(event.charCode) var charCode=event.chatCode;<br />
  else if (event.keyCode) var charCode=event.keyCode;<br />
  else if (event.which) var charCode=event.which;<br />
  else var charCode=0;<br />
  if(charCode<31) return false;<br />
  sendRequest('request.php?s='+encodeURIComponent(text),'sbar',getRequest);<br />
}</p>
<p>var resultId = '';<br />
if (navigator.appName == "Microsoft Internet Explorer")<br />
  var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");<br />
else<br />
  var httpRequest = new XMLHttpRequest();<br />

Тут всё просто. Функция sendRequest – служит для отправки запроса, getRequest – получение данных. m_over меняет внешний вид варианта подсказки при наведении курсора, m_out – при уходе курсора с объекта. m_change – при клике на подсказку вставляет текст в поле и исчезает (тут к примеру можно поставить после клика начинать поиск).
В функции ajaxSend я поставил ограничение на клавиши, чтобы избежать отправки запросов при нажатии на Shift, Ctrl и другие не символьные клавиши.

Запросы мы будем отправлять в файл request.php. Так как у IE ajax-запросы отправляются в win-1251 кодировке (а не utf-8, как у всех остальных браузеров) мы кодируем текст на кириллице с помощью функции encodeURIComponent(). Я на этом моменте долго помучался, пока разобрался =)

Ну, а теперь серверная часть нашего скрипта. Тут уже каждый может менять код под свои нужды, усовершенствовать и дополнять его.

<br />
<?php<br />
header("Content-type: text/plain; charset=utf-8");<br />
$s = mysql_real_escape_string(substr(trim($_GET['s']),0,50));<br />
if(!empty($s)) {<br />
  mysql_connect('localhost','root','');<br />
  mysql_select_db('test');<br />
  mysql_query("SET NAMES utf8");<br />
  $res = mysql_query("SELECT name FROM names WHERE name LIKE '".$s."%' ORDER BY name ASC LIMIT 7");<br />
  while($row = mysql_fetch_array($res)) {<br />
?></p>
<div class="asearch" onMouseOver="m_over(this)" onMouseOut="m_out(this)" onClick="m_change('<?=$row['name'];?>')"><br />
<?=$row['name'];?>
</div>
<p><?php }} ?><br />

В итоге серверная часть скрипта должна выдать что-то вроде этого:

</p>
<div class="asearch" onMouseOver="m_over(this)" onMouseOut="m_out(this)" onClick="m_change('Анатолий')">Анатолий</div>
<div class="asearch" onMouseOver="m_over(this)" onMouseOut="m_out(this)" onClick="m_change('Антон')">Антон</div>
<p>

Рабочий вариант скрипта
Скачать архив со скриптом (1.7Кб)

Вот, пожалуй, и весь скрипт. Я решил, что не стоит загружать фреемворками. Для тех, кто ищет вариант с фреемворком могу предложить AutoCompleter(для MooTools).