Как быстро сделать динамический поиск в стиле Web2.0 на Ajax
Недавно я писал про замечательный JavaScript Framework — ProtoType. На этот раз мы, с его помощью напишем интерфейс поиска aka Ajax.
ИМХО: На исходниках научиться легче, поэтому оформлю я всё это как “Tutorial”.
создадим файл index.html (и не забываем что нам нужен сам этот фреймворк — prototype.js)
<script type='text/javascript' src='prototype.js'></script>
Поле ввода:<input type='text' id='idSearch'>
<div id='idResult'></div>
Поле ввода:<input type='text' id='idSearch'>
<div id='idResult'></div>
После нам надо описать логику в js файле, назовём его search.js
function search_init()
{
r = $('idResult');
new Form.Element.Observer(
'idSearch',
2, // 200 milliseconds
function(el, value){
r.innerHTML = "Идёт поиск.... пожалуйста подождите...";
new Ajax.Request('result.html?s='+value,
{
method:'get',
onSuccess: function(transport){
r.innerHTML = transport.responseText || 'ошибка передачи данных';
},
onFailure: function(){r.innerHTML = 'ошибка поиска'; }
});
}
)
}
{
r = $('idResult');
new Form.Element.Observer(
'idSearch',
2, // 200 milliseconds
function(el, value){
r.innerHTML = "Идёт поиск.... пожалуйста подождите...";
new Ajax.Request('result.html?s='+value,
{
method:'get',
onSuccess: function(transport){
r.innerHTML = transport.responseText || 'ошибка передачи данных';
},
onFailure: function(){r.innerHTML = 'ошибка поиска'; }
});
}
)
}
Разберём по порядку
- $(name) — это функция, она находит элемент с итендификатором (id) name.
- Form.Element.Observer — это класс, обеспечивающий механизм слежения за элементами формы. Как только значение элемента idSearch измениться, так (через указаные нами 200 милисекунд) произойдёт описанное событие. Чтоит заметить, что запрос происходит не каждые 200 милисекунд, а только в том случае, если значение поля поменялось.
- А наше событие заключается в том, чтобы вызвать Ajax.Request и полученные данные показать в div-элементе idResult.
Запрос мы делаем к файлу “result.html”. Это конечно заглушка, и в вашем случае это будет наверника какой нибудь файл написанный на серверном скриптовом языке. И данные будут приходить в переменную $_GET[’s’]. Но для начала сделаем файл result.html
<ol>
<li>Первый пункт.</li>
<li>Второй пункт.</li>
<li>Третий ...</li>
</ol>
<li>Первый пункт.</li>
<li>Второй пункт.</li>
<li>Третий ...</li>
</ol>
Теперь когда уже всё почти готово, модифицируем наш файл search.html
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='search.js'></script>
Поле ввода: <input type='text' id='idSearch'>
<div id='idResult'></div>
<script>search_init()</script>
<script type='text/javascript' src='search.js'></script>
Поле ввода: <input type='text' id='idSearch'>
<div id='idResult'></div>
<script>search_init()</script>
Вот и всё, готово к употреблению
Метки
Регистрация доменов .РФ или RU за 195р!!!Совместно с регистратором onreg.ru мы проводим акцию! Купи домен для своего блога или нового интернет проекта по выгодным ценам. Так домен в зоне .RU или .РФ стоит всего 195 рублей. При покупке нескольких доменов, возможны скидки. На onreg.ru есть система тикетов, через которую мы всегда готовы ответить на все ваши вопросы и предложения.
Комментарии
дмитрий — 13.03.2009
#1
Не получается у меня сделать на странице одновременно несколько поисковых участков, чтоб можно было искать по разным параметрам, у меня не в тех места результат возвращается, можно пример с 2мя или больше полями и блоками отрисовки?
Svyat — 19.08.2011
#2
Есть пример поиска только на JavaScript, если файл result.html расположен на стороннем домене, и его нужно показать.
Оставить комментарий