Google поиск на сайте InstantCMS с ajax

Опубликовано:
Просмотров: 2179
+1
Голосов: 1

Рассмотрим как на сайт с системой InstantCMS встроить Google поиск на аяксе.

1. Последняя версия

http://jquery.com/

Query

2. Зарегистрироваться на сайте Google, для получения Google AJAX Search API Key

Ссылка

html код:

Добавляем между тегами <head> </head> ссылки на скрипты с jQuery и Google search:

Код PHP:
  1. <script type="text/javascript"
  2. src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
  3. <script src="http://www.google.com/jsapi?key=ВАШКЛЮЧ" type="text/javascript"></script>

Обязательно укажите свой ключ для поиска. Основной html код будет выглядеть так:

<div id="searchbox">

<h1>Что Вы хотите найти?</h1>

<input type="text" id="search" value="Найти..." autocomplete="off" />

<div id="resultbox" style="display:none;">

<div class="siteheader"></div>

<div id="sitesearch"></div>

<div class="googleheader"></div>

<div id="googlesearch"></div>

</div>

</div>

<div id="footer">

© 2011 имя .ru

</div>

Здесь прописано обычное текстовое поле (обратите внимание на то, что отсутствует тег form) с заданным идентификатором, значением и атрибутом autocomplete равным off. Это сделано для того, что бы отключить автоподстановку в наше поле во время набора текста. Далее идет div#resultbox (он скрыт вначале) с четырьмя дочерними div"ами. Как видно, два типа поиска содержат по два div"а: заголовок и содержимое. Если есть необходимость добавить ещё какой-либо поиск (Yahoo или др.), можно добавить столько div"ов, сколько необходимо. И последним идет подвал (который не обязателен, но мне он нравится).

javascript код:

Дальше самое интересное) Сразу после тех двух строчек с добавлением скриптов добавьте следующий код:

<script language="Javascript" type="text/javascript">

//<![CDATA[

google.load("search", "1");

$(document).ready(function() {

$("#search").blur(function () {

if($(this).val() == "") {

$(this).val("Search...");

$("#resultbox").css("display", "none");

}

});

$("#search").focus(function () {

if ($(this).val() == "Найти...") {

$(this).val("");

}

});

$("#search").keyup(function () {

$("#resultbox").css("display", "");

$("#footer").css("display", "none");

$(".siteheader").html('<img src="images/loading.gif" width="16" height="16"

style="margin-right:8px; vertical-align:-15%;" />Загружаем результаты с сайта...');

$(".googleheader").html('<img src="images/loading.gif" width="16" height="16"

style="margin-right:8px; vertical-align:-15%;" />Загружаем результаты с Google...');

/* === Поиск на сайте === */

$.ajax({

method: "get",

url: "sitesearch.php",

success: function(html){

$(".siteheader").html('Results from Site:');

$("#sitesearch").html(html);

}

});

/* === Google Search === */

var sc = new GSearchControl();

sc.addSearcher(new GwebSearch());

sc.addSearcher(new GvideoSearch());

sc.addSearcher(new GblogSearch());

sc.addSearcher(new GnewsSearch());

var drawOptions = new GdrawOptions();

drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

var foo;

sc.setSearchCompleteCallback(foo, function(){

$(".googleheader").html('Results from Google:');

});

sc.setNoResultsString(GSearchControl.NO_RESULTS_DEFAULT_STRING);

sc.draw(document.getElementById("googlesearch"), drawOptions);

sc.execute(document.getElementById("search").value);

/* === End Search === */

if($(this).val() == ""){

$("#resultbox").slideUp(700, function(){

$("#footer").css("display", "");

});

}

});

});

//]]>

</script>

Пояснения что к чему:

В первой строке подгружаем Google search:

google.load("search", "1");

Следующими несколькими строками кода определяется, как будет работать строка поиска. То есть, если наша строка поиска не активна (т.е. вы не используете её) и в ней нет набранного текста, то её содержимым становится текст "Найти..." и содержимое с результатами скрывается. Если поле становится активным, и его значение равно "Найти...", то данный текст не выводится.

Код PHP:

$("#search").blur(function () {

if($(this).val() == ""){

$(this).val("Найти...");

$("#resultbox").css("display", "none");

}

});

$("#search").focus(function () {

if ($(this).val() == "Найти...") {

$(this).val("");

}

});

Далее определяем обработчик событий keyup. При отпускании клавиши поиск должен обновиться. Некоторые могут задать вопрос: "Почему не использовать keydown?". Потому что, при использовании keydown, поиск будет производиться по последнему введённому значению, а не по тому, которое мы зададим сейчас. Чтобы проверить и понять, о чём я говорю, попробуйте реализовать иначе.

Код PHP:

$("#search").keyup(function () {

//...

});

В обработчике события необходимо совершить несколько действий. В начале нужно вывести div с результатами. Потом, нужно убрать/спрятать футер, но если у вас его нет, то этот шаг не нужен. И далее нужно задать заголовки для поиска по сайту и в Google.

Код PHP:

$("#resultbox").css("display", "");

$("#footer").css("display", "none");

$(".siteheader").html('<img src="images/loading.gif" width="16" height="16"

style="margin-right:8px; vertical-align:-15%;" />Loading Results from Site...');

$(".googleheader").html('<img src="images/loading.gif" width="16" height="16"

style="margin-right:8px; vertical-align:-15%;" />Loading Results from Google...');

Далее идет собственно сам поиск. Это ajax запрос (используя jQuery) к странице "sitesearch.php". В этом примере страница sitesearch.php является заглушкой. Но на самом деле страница должна возвращать данные поиска. Я не буду приводить логику данной страницы, т.к. это всего лишь пример.

Код PHP:

/* === Поиск по нашему сайту === */

$.ajax({

method: "get",

url: "sitesearch.php",

success: function(html){

$(".siteheader").html('Results from Site:');

$("#sitesearch").html(html);

}

});

Далее идет - реализация поиска Google. Не будем подробно рассматривать это, т.к. это можно прочесть в документации Google.

- Создаем объект GSearchControl;

- Добавляем типы поиска в объект. Можно самим решить, что следует добавлять;

- Устанавливаем drawOptions равным tabbed"

- Определяем функцию searchCompleteCallback. Здесь нужно задать заголовок поиска Google;

- Устанавливаем NoResultsString по-умолчанию и указываем, куда будем выдавать результаты поиска;

- И выполняем поиск по введённым данным.

Код PHP:

/* === Google Search === */

var sc = new GSearchControl();

sc.addSearcher(new GwebSearch());

sc.addSearcher(new GvideoSearch());

sc.addSearcher(new GblogSearch());

sc.addSearcher(new GnewsSearch());

var drawOptions = new GdrawOptions();

drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

var foo;

sc.setSearchCompleteCallback(foo, function(){

$(".googleheader").html('Results from Google:');

});

sc.setNoResultsString(GSearchControl.NO_RESULTS_DEFAULT_STRING);

sc.draw(document.getElementById("googlesearch"), drawOptions);

sc.execute(document.getElementById("search").value);

Последнее, что нужно сделать с помощью javascript - это очишать данные поиска. Если поле для поиска очищается, то нам нужно убрать/спрятать панель с результатами (используя jQuery) и показать/вывести футер.

Код PHP:

if($(this).val() == ""){

$("#resultbox").slideUp(700, function(){

$("#footer").css("display", "");

});

}

Стили CSS:

Не будем подробно останавливаться на css, т.к. по большей части - это всего лишь стилизация и каждый настроит внешний вид под свой дизайн. Есть несколько стилевых хаков для поиска Google, но не более того. Главная часть нашего css имеет следующий вид:

Код PHP:

#searchbox {

margin:0 auto;

background:url(images/back.png) no-repeat top;

width:700px;

height:200px;

margin-top:100px;

padding:40px 0px 0px 40px;

color:#fff;

}

#resultbox {

border: 3px solid #999;

background:#fff;

padding:15px;

width:620px;

margin-top:5px;

margin-bottom:10px;

color:#000;

}

#footer {

margin:0 auto;

width:700px;

color:#999;

padding-left:40px;

margin-top:-25px;

}

input {

font-family:Georgia;

font-weight:bold;

font-style:italic;

padding:10px;

font-size:20px;

border: 3px solid #ccc;

width:630px;

}

input:focus,

textarea:focus,

select:focus {

border: 3px solid #999;

}

#googlesearch, #sitesearch {

margin-left:20px;

}

.googleheader, .siteheader {

font-size:18px;

font-family:Georgia;

font-weight:bold;

font-style:italic;

margin:20px 0px;

border-bottom:1px solid #ccc;

color:#666;

}

.siteheader {

margin-top:5px;

}

/* Google Style Hacks */

.gsc-search-box, .gsc-configLabelCell {

display:none;

}

.gsc-control {

width:100%;

}

.gsc-tabHeader {

padding:3px 8px 5px 8px;

}

.gsc-tabhActive {

border-top:2px solid #666 !important;

}

.gsc-tabhInactive {

}

/* Цвет ссылок */

#resultbox a, .gs-title, .gs-title b {

font-size:13px;

font-weight:bold;

color:#2253AA !important;

}

.gs-visibleUrl, .gs-visibleUrl-short {

color:#666 !important;

}

Полное определение стилей можно посмотреть, скачав исходники.

Исходники

Комментарии (2)
Вадим Кондаков #
: -1
А воровать чужие статьи нехорошо! можно и:  stuk
Letsgo #
: +1
Например? Откуда эта статья сворована?

Голосуем

Самый нужный компонент