Рассмотрим как на сайт с системой InstantCMS встроить Google поиск на аяксе.
1. Последняя версия
http://jquery.com/
Query
2. Зарегистрироваться на сайте Google, для получения Google AJAX Search API Key
Ссылка
html код:
Добавляем между тегами <head> </head> ссылки на скрипты с jQuery и Google search:
Обязательно укажите свой ключ для поиска. Основной 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;
}
Полное определение стилей можно посмотреть, скачав исходники.
Исходники
