Всем доброго дня!

Многие вебмастера хотят, чтобы пользователь уже в форме поиска мог выбрать, в каком разделе сайта искать, поэтому сегодня я расскажу, как это можно реализовать при помощи Яндекс.Поиска для сайта.

Итогом нашей работы должен стать вот такой переключатель между формами поиска.

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

Зачем это надо

Иногда важно сразу дать пользователью выбор "искать только по новостям" или "искать на всем сайте";

В разделе "Форма поиска" Яндекс.Поиска для сайта вы можете выбрать одну из следующих настроек:

- не давать пользователю права выбирать область поиска в форме

- дать выбор между "поиском по вашему сайту" или "по интернету".

Однако, порой возникает необходимость предоставлять пользователю выбор, который связан именно с особенностями вашего сайта:

- искать «по новостям» или искать «на всем сайте»;
- «искать по сайту» или «искать по группе сайта».

HTML

Теперь, когда задача ясна, приступим к ее реализации.

Для начала создадим те поиски, которые нам нужны. Например, создадим отдельно поиск по разделу "новости" и назовем его Поиск I, для этого введем в поле «Область поиска» нового поиска полный адрес нужного нам раздела, например, example.com/news. Теперь создадим поиск по всему сайту и назовем его Поиск II, для этого создаем обычный поиск по всему сайту, указав в области поиска адрес сайта - example.com.
Сохранив настройки обоих поисков, предварительно подобрав одинаковое для них оформление, мы переходим к встраиванию кода на сайт. В HTML мы вставляем два сгенерированных кода формы поиска, выглядеть это будет так:

<div class="formsblock">
    <div class="tabs">
        <div class="tab1" id="tab1">Форма 1</div>
        <div class="tab2" id="tab2">Форма 2</div>
    </div>

    <div class="forms">

        <div class="form1" id="form1">Форма 1:<br/>

        <!-- Здесь мы вставляем код первой формы -->

<div class="ya-site-form ya-site-form_inited_no" onclick="return {'bg': 'transparent', 'target': '_self', 'language': 'ru', 'suggest': true, 'tld': 'ru', 'site_suggest': true, 'action': 'http://alltogame.ru/test2/mob.html', 'webopt': false, 'fontsize': 12, 'arrow': false, 'fg': '#000000', 'searchid': '2042992', 'logo': 'rw', 'websearch': false, 'type': 2}"><form action="http://yandex.ru/sitesearch" method="get" target="_self"><input type="hidden" name="searchid" value="2042992"/><input type="hidden" name="l10n" value="ru"/><input type="hidden" name="reqenc" value=""/><input type="text" name="text" value=""/><input type="submit" value="Найти"/></form></div><style type="text/css">.ya-page_js_yes .ya-site-form_inited_no{display:none}</style><script type="text/javascript">(function(w,d,c){var s=d.createElement('script'),h=d.getElementsByTagName('script')[0],e=d.documentElement;(' '+e.className+' ').indexOf(' ya-page_js_yes ')===-1&&(e.className+=' ya-page_js_yes');s.type='text/javascript';s.async=true;s.charset='utf-8';s.src=(d.location.protocol==='https:'?'https:':'http:')+'//site.yandex.net/v2.0/js/all.js';h.parentNode.insertBefore(s,h);(w[c]||(w[c]=[])).push(function(){Ya.Site.Form.init()})})(window,document,'yandex_site_callbacks');</script>

        </div>

        <div class="form2" id="form2">Форма 2:<br/>

        <!-- Здесь мы вставляем код второй формы -->

<div class="ya-site-form ya-site-form_inited_no" onclick="return {'bg': 'transparent', 'target': '_self', 'language': 'ru', 'suggest': true, 'tld': 'ru', 'site_suggest': true, 'action': 'http://alltogame.ru/test2/mob.html', 'webopt': false, 'fontsize': 12, 'arrow': false, 'fg': '#000000', 'searchid': '2042992', 'logo': 'rw', 'websearch': false, 'type': 2}"><form action="http://yandex.ru/sitesearch" method="get" target="_self"><input type="hidden" name="searchid" value="2042992"/><input type="hidden" name="l10n" value="ru"/><input type="hidden" name="reqenc" value=""/><input type="text" name="text" value=""/><input type="submit" value="Найти"/></form></div><style type="text/css">.ya-page_js_yes .ya-site-form_inited_no{display:none}</style><script type="text/javascript">(function(w,d,c){var s=d.createElement('script'),h=d.getElementsByTagName('script')[0],e=d.documentElement;(' '+e.className+' ').indexOf(' ya-page_js_yes ')===-1&&(e.className+=' ya-page_js_yes');s.type='text/javascript';s.async=true;s.charset='utf-8';s.src=(d.location.protocol==='https:'?'https:':'http:')+'//site.yandex.net/v2.0/js/all.js';h.parentNode.insertBefore(s,h);(w[c]||(w[c]=[])).push(function(){Ya.Site.Form.init()})})(window,document,'yandex_site_callbacks');</script>

       </div>

    </div>
</div>

JavaScript

Далее мы пишем скрипт, который отрабатывает на кликах по кнопкам и показывает и прячем ту или иную форму. Это можно сделать, например, так:

<script type="text/javascript">

    $(document).ready(function(){

        $("#tab1").click(function(){

            $("#form2").fadeOut("fast",function(){

                $("#form1").fadeIn("fast");

                $("#tab1").css("background","#6e6e6e");

                $("#tab2").css("background","none");

            }) ;

        }) ;

        $("#tab2").click(function(){

            $("#form1").fadeOut("fast",function(){

                $("#form2").fadeIn("fast");

                $("#tab2").css("background","#6e6e6e");

                $("#tab1").css("background","none");

            }) ;

        }) ;

    }) ;

</script>

CSS

Теперь, когда с технической стороны у нас все работает, можно подумать, как сделать так, чтобы пользователь не замечал этой маленькой хитрости. Делается это очень просто: прописываем, где и как должны располагаться кнопки, и как именно одна форма должна накладываться на другую при переключении кнопок. Обратите внимание, что формы должны быть одинакового размера:

.formsblock .tabs {width: 155px; height: 120px; float:left; }
.formsblock .tabs .tab1 { width: 150px; height: 45px; text-align: center; padding-top: 15px; cursor: pointer; background-color: #6e6e6e;}
.formsblock .tabs .tab2 { width: 150px; height: 45px; text-align: center; padding-top: 15px; cursor: pointer;}

.formsblock .forms {width: 740px; height: 120px; float:left; }
.formsblock .forms .form1 {width: 100%; height: 120px; background-color: #6e6e6e;}
.formsblock .forms .form2 {width: 100%; height: 120px; background-color: #6e6e6e; display: none;}

На этом все, теперь вы можете предоставлять вашим пользователям выбор, где искать, еще до того, как они ввели свой вопрос.

 Команда сервиса Яндекс.Поиск для сайта