понедельник, 5 апреля 2010 г.

Сделаем поисковую формочку для Яндекса

В прошлом посте я написал, как сделать поисковую формочку по своему сайту от Google. Что хорошо в Google, так это то, что там позволительно менять и лопатить, как только душе будет угодно, код этой формочки, которая сейчас выдаётся по-умолчанию вообще не формой, а виджетом.

Яндекс предоставляет аналогичную услугу. Что в этой услуге плохо, так это то, что запрещено менять код полученной формы. То есть подставить в url свои аргументы уже нельзя. Но, с другой стороны, правилами предоставления услуг поиска разрешено разместить на своем личном или корпоративном сайте поисковую форму для передачи поисковых запросов в Яндекс. Вот этим мы сейчас и займёмся.


Конечно, можно написать в Яндекс письмо, и вполне возможно, что Вам в полученную формочку разрешат внести оговоренные изменения, но я здесь хочу рассмотреть всего лишь пример и буду оставаться в рамках общих правил.

Итак, ограничение поиска по дате у Яндекса оформлено технически более привлекательно, чем у Google. Для создания такого ограничения надо передать аж 8 параметров. Два из них date="within" и within="777" неизменны для ограничения по любой дате. А другие шесть параметров - это число месяца, номер месяца и год для дат начала и окончания ограничения. То есть соответственно from_day, from_month, from_year, to_day, to_month и to_year. Нумерация дней и месяцев здесь происходит, начиная с 1.

Кроме того можно задать ограничение для поиска по конкретному сайту параметром site, и ограничение на количество выдаваемых результатов, которое должно находиться в пределах от 1 до 50 при помощи параметра numdoc. Еще можно ограничить вывод результатов поиска отдельными форматами, а точнее MIME-типами. К сожалению, их разнообразие у Яндекса существенно уступают Гуглу.

Техническая реализация передачи последних трёх параметров абсолютно аналогична предыдущему случаю. А вот передачу ограничения по дате я сделал иначе. Не очень приятно заставлять пользователя вводить ограничения по дате вручную, хотя такую возможность и можно ему предоставить (как сделано в расширенном поиске самого Яндекса). Интересно было бы сделать полноценный календарик, но это является темой для отдельного поста. Здесь же я ограничусь ограничением по временным промежуткам, ограниченным свеху текущей датой. А так как сегодняшнюю дату жестко в html не зашьешь, то волей-неволей нам придется использовать javascript. Можно и формировать эту формочку динамически на сервере - тогда, конечно, можно обойтись вообще без javascript-а.

Итак, главным объетом, с которым я здесь работал, является объект даты. Здесь следует отметить, что (насколько я понял - если нет, поправьте меня, пожалуйста) Яндекс использует для ограничения даты в московском часовом поясе, то есть UTC+3. Поэтому за текущую дату принимается дата, сдвинутая на 3 часа вперед, а в обращени к ней используется UTC-время, что и окажется московским часовым поясом.

От текущей даты отнимается один день, неделя и год и получаются даты для подстановки в нижнее ограничение. Упрощением является то, что числом дней в месяце здесь считает 30 для любого месяца, а числом дней в году - 365 для любого года. Это тоже можно исправить, но пример это слишком усложнит.

Вообще, всё перечисленное можно сделать и другими, в том числе более элегантными способами. Но эта простота и топорность и является главным достоинством данного кода. Например, вторая формочка не нужна совершенно, а её элементы выделены в отдельные только для того, чтобы привязать к событиям на них функции javascript и не передавать мусора в поисковый запрос. В общем, если надо - разбирайтесь.

Джаваскриптовая часть:
  1. <script language="JavaScript">
  2.  one_day = 1000*60*60*24
  3.  today = new Date((new Date()).getTime() + 1000*60*60*3)
  4.  yesterday = new Date(today.getTime() - one_day)
  5.  last_week = new Date(today.getTime() - one_day * 7)
  6.  last_month = new Date(today.getTime() - one_day * 30)
  7.  last_year = new Date(today.getTime() - one_day * 365)
  8.  
  9. function set_curr_date(){
  10.  document.getElementById("to_day").value = today.getUTCDate();
  11.  document.getElementById("to_month").value = today.getUTCMonth() + 1;
  12.  document.getElementById("to_year").value = today.getUTCFullYear();
  13. }
  14.  
  15. function yesterday_chosen(){
  16.  set_curr_date()
  17.  document.getElementById("from_day").value = yesterday.getUTCDate();
  18.  document.getElementById("from_month").value = yesterday.getUTCMonth() + 1;
  19.  document.getElementById("from_year").value = yesterday.getUTCFullYear();
  20. }
  21.  
  22. function last_week_chosen(){
  23.  set_curr_date()
  24.  document.getElementById("from_day").value = last_week.getUTCDate();
  25.  document.getElementById("from_month").value = last_week.getUTCMonth() + 1;
  26.  document.getElementById("from_year").value = last_week.getUTCFullYear();
  27. }
  28.  
  29. function last_month_chosen(){
  30.  set_curr_date()
  31.  document.getElementById("from_day").value = last_month.getUTCDate();
  32.  document.getElementById("from_month").value = last_month.getUTCMonth() + 1;
  33.  document.getElementById("from_year").value = last_month.getUTCFullYear();
  34. }
  35.  
  36. function last_year_chosen(){
  37.  set_curr_date()
  38.  document.getElementById("from_day").value = last_year.getUTCDate();
  39.  document.getElementById("from_month").value = last_year.getUTCMonth() + 1;
  40.  document.getElementById("from_year").value = last_year.getUTCFullYear();
  41. }
  42.  
  43. function no_time_chosen(){
  44.  document.getElementById("from_day").value = "";
  45.  document.getElementById("from_month").value = "";
  46.  document.getElementById("from_year").value = "";
  47. }
  48. </script>
* This source code was highlighted with Source Code Highlighter.

И сама html-формочка:
<form action="http://yandex.ua/yandsearch" method="get"><input name="text"/><input type="submit" value="Найти"/>
<br />
<select name="mime">
 <option value=""/> Все типы файлов
 <option value="pdf"/> Документы в Portable Document Format
 <option value="doc"/> Документы Microsoft Word
 <option value="rtf"/> Документы в Rich Text Format
 <option value="xls"/> Электронные таблицы Microsoft Excel
 <option value="ppt"/> Перезентации Microsoft PowerPoint
</select>
<br />
<select name="numdoc">
 <option value="5"/> 5 результатов
 <option value="10"/> 10 результатов
 <option value="20"/> 20 результатов
 <option value="50"/> 50 результатов
</select>
Область поиска:
<input type="radio" name="site" value="moradan.sopovs.com"> На этом сайте<input type="radio" name="site_chooser" value="" checked>В интернете

<input value="within" name="date" type="hidden"/>
<input value="777" name="within" type="hidden"/>

<input value="" name="from_day" type="hidden" id="from_day"/>
<input value="" name="to_day" type="hidden" id="to_day"/>
<input value="" name="from_month" type="hidden" id="from_month"/>
<input value="" name="to_month" type="hidden" id="to_month"/>
<input value="" name="from_year" type="hidden" id="from_year"/>
<input value="" name="to_year" type="hidden" id="to_year"/>
</form>
<form>
Ограничение поиска по дате:<br/>
<input type="radio" name="date_chosser" OnClick="no_time_chosen()" checked>За любое время<input type="radio" name="date_chosser" OnClick="yesterday_chosen()">За 24 часа<input type="radio" name="date_chosser" OnClick="last_week_chosen()">За неделю<input type="radio" name="date_chosser" OnClick="last_month_chosen()">За месяц<input type="radio" name="date_chosser" OnClick="last_year_chosen()">За год<br/>
</form>


* This source code was highlighted with Source Code Highlighter.

Выглядит вся эта радость вот так:




Область поиска:
На этом сайтеВ интернете
Ограничение поиска по дате:
За любое времяЗа 24 часаЗа неделюЗа месяцЗа год
blog comments powered by Disqus