Поиск по сайту с использованием API Google AJAX Search

Одной из наиболее часто используемых на сайтах опций является организация поиска информации. Можно создавать функцию поиска самостоятельно с нуля. То есть использовать серверный язык программирования (например,  PHP) для организации запросов к базе данных и выводить результат на странице.

Другой метод - использовать сервис одного из поисковых сайтов, которые уже имеют огромный набор информации практически обо всем. В данном уроке мы будем использовать API Google AJAX Search для создания пользовательского поискового механизма, который позволит искать страницы, изображения, видео и новости на вашем сайте.

demosourse

HTML

Начнем с разметки HTML. Используем новинку HTML5 doctype, затем определяем заголовок документа и включаем таблицу стилей в секцию head.

search.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поиск по сайту с использованием Google | Демонстрация для сайта RUSELLER.COM</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="page">
<h1>Поиск по сайту с использованием Google</h1>
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Submit" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Поиск по</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Поиск в Интернет</label>
</div>
<ul class="icons">
<li class="web" title="Страницы" data-searchType="web">Страницы</li>
<li class="images" title="Изображения" data-searchType="images">Изображения</li>
<li class="news" title="Новости" data-searchType="news">Новости</li>
<li class="videos" title="Видео" data-searchType="video">Видео</li>
</ul>
</fieldset>
</form>
<div id="resultsDiv"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

В секции body определяем основной контейнер элемент div #page. Форма размещенная внутри него действует не только как поисковая форма, но и как контейнер. Она имеет скругленные углы CSS3 и темный цвет фона, который позволяет легко отличить ее от остального содержания страницы.

Внутри формы имеется поле текста поиска, после которого определяются радио кнопки для выбора варианта поиска по сайту или в интернет, а также четыре иконки типа поиска, которые организованы в неупорядоченный список. В конце страницы мы включаем jQuery и наш scripts.js, который будет разобран далее.

Поиск по сайту с использованием Google

CSS

Стили CSS находятся в файле styles.css. Здесь приводится только наиболее интересная их часть.

styles.css – Часть 1

#searchForm{
	/* Форма поиска. */
	background-color:#4C5A65;
	padding:50px 50px 30px;
	margin:80px 0;
	position:relative;

	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
}

fieldset{
	border:none;
}

#searchInputContainer{
	/* Данный div содержит прозрачный прямоугольник над полем текста поиска */
	width:420px;
	height:36px;
	background:url("img/searchBox.png") no-repeat;
	float:left;
	margin-right:12px;
}

#s{
	/* Поле текста поиска. */
	
	border:none;
	color:#888888;
	background:url("img/searchBox.png") no-repeat;
	
	float:left;
	font-family:Arial,Helvetica,sans-serif;
	font-size:15px;
	height:36px;
	line-height:36px;
	margin-right:12px;
	outline:medium none;
	padding:0 0 0 35px;
	text-shadow:1px 1px 0 white;
	width:385px;
}

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

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

styles.css – Часть 2

/* UL, который содержит иконки типов поиска */

.icons{
	list-style:none;
	margin:10px 0 0 335px;
	height:19px;
	position:relative;
}

.icons li{
	background:url("img/icons.png") no-repeat;
	float:left;
	height:19px;
	text-indent:-9999px;
	cursor:pointer;
	margin-right:5px;
}

/* Стили для каждой иконки */

li.web{ width:15px;}
li.web.active,
li.web:hover{ background-position:left bottom;}

li.images{ width:22px; background-position:-18px 0;}
li.images.active,
li.images:hover{ background-position:-18px bottom;}

li.news{ width:14px; background-position:-44px 0;}
li.news.active,
li.news:hover{ background-position:-44px bottom;}

li.videos{ width:17px; background-position:right 0;}
li.videos.active,
li.videos:hover{ background-position:right bottom;}

span.arrow{
	/* Маленькая стрелка, которая перемещается под иконками */
	
	width:11px;
	height:6px;
	margin:21px 0 0 5px;
	position:absolute;
	background:url('img/arrow.png') no-repeat;
	left:0;
}


/* Кнопка Искать */


#submitButton{
	background:url('img/buttons.png') no-repeat;
	width:83px;
	height:36px;
	text-indent:-9999px;
	overflow:hidden;
	text-transform:uppercase;
	border:none;
	cursor:pointer;
}

#submitButton:hover{
	background-position:left bottom;
}

В выше приведенном фрагменте можно заметить, что все иконки типов поиска содержатся в одном файле фонового изображения. Для позиционирования соответствующей части фона используется смещение для обоих состояний иконки (обычного и hover).

Такая же техника со спрайтами используется для кнопки "Искать". Ее текст скрыт с помощью установки отрицательного значения свойству text-indent, и выводится изображение  buttons.png в качестве фона (верхняя часть изображения используется для обычного состояния, а нижняя для состояния hover).

styles.css – Часть 3

/* Результаты поиска: новости и веб страницы */


.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{ 
	background-color:#5D6F7B;
	font-size:18px;
	font-weight:normal;
	padding:8px 20px;
	
	/* Используем закругленные углы CSS3 */
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;
}
.webResult h2 b{ color:#fff; }
.webResult h2 a{ color:#eee;border:none;}
.webResult p{ line-height:1.5;padding:15px 20px;}
.webResult p b{ color:white;}
.webResult > a{ margin-left:20px;}


/* Результаты поиска: изображения и видео */


.imageResult{
	float:left;
	height:180px;
	margin:0 0 20px 40px;
	text-align:center;
	width:152px;
	overflow:hidden;
}
.imageResult img{ display:block;border:none;}
.imageResult a.pic{
	border:1px solid #fff;
	outline:1px solid #777;
	display:block;
	margin:0 auto 15px;
}

/* Кнопка _Показать еще_ */

#more{
	width:83px;
	height:24px;
	background:url('img/more.png') no-repeat;
	cursor:pointer;
	margin:40px auto;
}

#more:hover{
	background-position:left bottom;
}

В последнем фрагменте задаются стили для результатов поиска. Хотя мы используем четыре типа результатов поиска – страницы, новости, изображения и видео -  они все используют только два класса – .webResult и .imageResult. Также устанавливаются стили для кнопки #more, которая динамически добавляется jQuery  в зависимости от результатов, возвращаемых Google.

Поиск по сайту с использованием Google

 

jQuery

Как уже упоминалось выше, данное приложение использует API Google AJAX Search. Google имеет собственную библиотеку JavaScript, но если вы будете ее использовать, то будете ограничены интерфейса Google. Не смотря на хорошую функциональность, такой дизайн уместен не на всех сайтах. Поэтому в данном уроке используется "голая" версия с формированием запросов JSONp прямо к API Google.

Прежде чем разбирать код jQuery, нужно взглянуть на то, какие данные Google предоставляет нам после выполнения поиска с помощью API.

Пример результата, возвращаемого API Google

{
    "GsearchResultClass": "GwebSearch",
    "unescapedUrl": "http://tutorialzine.com/2010/02/html5-css3-website-template/",
    "url": "http://tutorialzine.com/2010/02/html5-css3-website-template/",
    "visibleUrl": "tutorialzine.com",
    "cacheUrl": "http://www.google.com/search?q=cache:_NSLxH-cQMAJ:tutorialzine.com",
    "title": "Coding a <b>CSS3</b> & <b>HTML5</b> One-Page Website Template | Tutorialzine",
    "titleNoFormatting": "Coding a CSS3 & HTML5 One-Page Website Template | Tutorialzine",
    "content": "Feb 16, 2010 <b>...</b> Here we are using the new version of HTML.."
}

Поиск, выполненный  помощью API, возвращает такой же результат, как и тот, который можно наблюдать на сайте Google. Разница заключается в том, что мы получаем массив JavaScript, который наполнен объектами, подобными выше приведенному примеру. Каждый такой объект содержит тип поиска, заголовок, URL и текст со страницы, которая содержит термины соответствующие условиям поиска.

Используя свойство GsearchResultClass  мы можем определить как нужно выводить информацию, которая получена в данный момент. В нашем примере поиск поддерживает только четыре типа - страницы, новости, изображения и видео. Полный список доступных типов поиска можно увидеть в документации API Google AJAX Search.

script.js – Часть 1

$(document).ready(function(){
	
	var config = {
		siteURL		: 'ruseller.com',	// Сайт, на котором используется поиск
		searchSite	: true,
		type		: 'web',
		append		: false,
		perPage		: 8,			// Google допускает использовать максимум 8
		page		: 0				// Первая страница
	}
	
	// Маленькая стрелка, которая отмечает иконку типа поиска:
	var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');
	
	$('ul.icons li').click(function(){
		var el = $(this);
		
		if(el.hasClass('active')){
			// Иконка уже активна, выходим
			return false;
		}
		
		el.siblings().removeClass('active');
		el.addClass('active');
		
		// Перемещаем стрелку под данную иконку
		arrow.stop().animate({
			left		: el.position().left,
			marginLeft	: (el.width()/2)-4
		});
		
		// Устанавливаем тип поиска
		config.type = el.attr('data-searchType');
		$('#more').fadeOut();
	});
	
	// Устанавливаем домен сайта как метку для первой радио кнопки:
	$('#siteNameLabel').append(' '+config.siteURL);
	
	// Маркируем радио кнопку поиска по сайту как активную:
	$('#searchSite').click();	
	
	// Маркируем иконку веб поиска как активную:
	$('li.web').click();
	
	// Устанавливаем фокус ввода в поле для ввода текста:
	$('#s').focus();

	$('#searchForm').submit(function(){
		googleSearch();
		return false;
	});
	
	$('#searchSite,#searchWeb').change(function(){
		// Ловим событие click на одной из радио кнопок.
		// config.searchSite примет значение либо true либо false.
		
		config.searchSite = this.id == 'searchSite';
	});

Объект config содержит опции общей конфигурации, такие как URL сайта, начальную страницу (используется при нумерации страниц), и тип поиска по умолчанию (поиск страниц). Google ограничивает выборку результатов поиска восемью пунктами в настоящее время, что достаточно для поиска страниц, но мало для поиска изображений. Будем надеяться, что Google увеличит пределы в будущем.

Чтобы интегрировать поиск на ваш сайт нужно заменить содержание свойства siteURL в объекте config адресом вашего сайта.

Когда передается форма, jQuery вызывает функцию googleSearch(), которая представлена ниже.

script.js – Part 2

	function googleSearch(settings){
		
		// Если никаких аргументов не было передано функции,
		// то будут использоваться значения по умолчанию из объекта конфигурации:
		
		settings = $.extend({},config,settings);
		settings.term = settings.term || $('#s').val();
		
		if(settings.searchSite){
			// Используем  опцию для Google site:example.com для ограничения поиска
			// по определенному домену:
			settings.term = 'site:'+settings.siteURL+' '+settings.term;
		}
		
		// URL API Google AJAX Search
		var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+'?v=1.0&callback=?';
		var resultsDiv = $('#resultsDiv');
		
		$.getJSON(apiURL,{q:settings.term,rsz:settings.perPage,start:settings.page*settings.perPage},function(r){
			
			var results = r.responseData.results;
			$('#more').remove();
			
			if(results.length){
				
				// Если результат был возвращен, добавляем его к элементу div pageContainer,
				// который затем добавлет его к #resultsDiv:
				
				var pageContainer = $('<div>',{className:'pageContainer'});
				
				for(var i=0;i<results.length;i++){
					// Создаем новый объект результата и запускаем его метод toString:
					pageContainer.append(new result(results[i]) + '');
				}
				
				if(!settings.append){
					// Данный код выполняется, если запускается новый поиск 
					// вместо нажатия на кнопку _Показать еще_:
					resultsDiv.empty();
				}
				
				pageContainer.append('<div class="clear"></div>')
							 .hide().appendTo(resultsDiv)
							 .fadeIn('slow');
				
				var cursor = r.responseData.cursor;
				
				// Проверяем, имеются ли еще страницы с результатами поиска, 
				// и определяем, показывать ли кнопку _Показать еще_:
				
				if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
					$('<div>',{id:'more'}).appendTo(resultsDiv).click(function(){
						googleSearch({append:true,page:settings.page+1});
						$(this).fadeOut();
					});
				}
			}
			else {
				
				// В данном поиске не было найдено ничего.
				
				resultsDiv.empty();
				$('<p>',{className:'notFound',html:'По вашему запросу ничего не найдено!'}).hide().appendTo(resultsDiv).fadeIn();
			}
		});
	}

Функция googleSearch() отправляет запрос JSONp к API Google, генерирует разметку для вывода результатов поиска, и вставляет их в div #resultsDiv. Она может либо предварительно удалить содержимое div (если мы делаем новый поиск), либо добавить результаты к уже имеющимся (в случае, если нажата кнопка “Показать еще”).

В обоих случаях используется одинаковая логика – создается новый div .pageContainer для каждого набора результатов (данный div имеет нижнюю границу, поэтому легко отделить одну страницу от другой), затем создается объект класса result (он разбирается ниже), инициализируется и его разметка добавляется к  pageContainer.

Результат поиска

script.js – Часть 3

	function result(r){
		
		// Это определение класса. Объект данного класса создается для каждого результата поиска.
		// Разметка генерируется методом .toString().
		
		var arr = [];
		
		// GsearchResultClass передается из API Google
		switch(r.GsearchResultClass){

			case 'GwebSearch':
				arr = [
					'<div class="webResult">',
					'<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
					'<p>',r.content,'</p>',
					'<a href="',r.unescapedUrl,'" target="_blank">',r.visibleUrl,'</a>',
					'</div>'
				];
			break;
			case 'GimageSearch':
				arr = [
					'<div class="imageResult">',
					'<a target="_blank" href="',r.unescapedUrl,'" title="',r.titleNoFormatting,'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
					'<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',r.tbHeight,'" /></a>',
					'<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.visibleUrl,'</a>',
					'</div>'
				];
			break;
			case 'GvideoSearch':
				arr = [
					'<div class="imageResult">',
					'<a target="_blank" href="',r.url,'" title="',r.titleNoFormatting,'" class="pic" style="width:150px;height:auto;">',
					'<img src="',r.tbUrl,'" width="100%" /></a>',
					'<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.publisher,'</a>',
					'</div>'
				];
			break;
			case 'GnewsSearch':
				arr = [
					'<div class="webResult">',
					'<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
					'<p>',r.content,'</p>',
					'<a href="',r.unescapedUrl,'" target="_blank">',r.publisher,'</a>',
					'</div>'
				];
			break;
		}
		
		// Метод toString.
		this.toString = function(){
			return arr.join('');
		}
	}
	
	
});

Данная функция действует как конструктор класса result.  Она получает объект, который возвращается из API Google (пример объекта демонстриовался в началае шага jQuery) и инициализирует arr в соответствии со значением GsearchResultClass. Заметьте, что arr определяется как массив, а не как строка. Так процесс протекает несколько быстрее, чем конкатентация строк между собой.

Внизу определения класса содержится метод toString(). Он вызывает внутренний метод массива join, который преобразует его в строку. toString() является магическим методом, который неявно вызывается при создании объекта результата в script.js – Часть 2.

Готово!

Заключение

Конфигурация данного приложения для организации поиска по вашему сайту выполняется изменением свойства siteURL объекта config в файле script.js.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tutorialzine.com/2010/09/google-powered-site-search-ajax-jquery/
Перевел: Сергей Фастунов
Урок создан: 17 Сентября 2010
Просмотров: 65290
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 17 Сентября 2010 19:07
    Женек
    Классный поиск... спасибо, буду юзать
  • 17 Сентября 2010 19:24
    DiMaN_VRN
    большое спасибо!!!
  • 17 Сентября 2010 20:00
    Денисов
    классный урок
  • 17 Сентября 2010 21:11
    sigrosigro
    Круто
  • 18 Сентября 2010 12:21
    НеБот
    Видео по запросу упс по руселлеру на самом деле ищется по всему ютубу... А так классно, наверное буду юзать, спасибо!
  • 18 Сентября 2010 12:47
    rubyx
    Забавно, какраз пригодился) Спасибо!
  • 19 Сентября 2010 01:55
    rekon
    скажите, для поиска необходимо чтобы сайт был проиндексирован роботом google? я правильно понял?
  • 21 Сентября 2010 10:53
    anton
    Плохо ищуться страници на сайте, тоесть почему плохо, при появлении новой новости в пределах 10 мин. этот поиск не находит ее. Наверно нужно что бы гугл ее проиндексировал(новость).
  • 14 Октября 2010 12:33
    yavasilek
    а как google отнесется к тому что на странице нет логотипа google? Ведь у них помойму такие правила...
  • 30 Октября 2010 14:27
    Александр
    to - yavasilek ПЛОХО!!!.... так как: При использовании готовых технологий Гугл (в том числе и API Google AJAX Search) требуется оставлять логотип Гугл (с действующей ссылкой на Гугла) ниже поисковой формы и надпись "технология Google" ....и всем остальным желающим использовать эту технологию: Использовать API Google AJAX Search можно ЛИШЬ В ОКРУЖЕНИИ ДРУГОГО КОНТЕНТА на странице сайта, а не НА ОТДЕЛЬНОЙ странице выдачи в окружении объявлений рекламодателей....!!!! Иначе Ваш сайт Гугл просто забанит за нарушение этих правил.... К тому же в данном примере, я нигде не нашёл строчки с ключём издателя для использования API Google AJAX Search Хотя, насколько мне помнится, этот ключ не обязателен, он нужен лишь для того, чтобы отслеживать ошибки при работе API и помогать Вам как издателю оперативно их исправлять при возникновении ошибок в вашем приложении...
  • 30 Октября 2010 14:34
    Александр
    У меня, есть лишь один вопрос по данному уроку. Как к этому скрипту, добавить ещё и поиск по КНИГАМ Гугл (с выводом результатов естественно), и как убрать текстовые ссылки на сайты под превьюшками роликов и изображений (или сделать их неактивными)
  • 8 Ноября 2010 21:24
    korobas
    Скажите! А чтоб срабатывал платный поиск что нужно доделать? Я имею ввиду GoogleAdsense У меня стояла стандартная форма поиска, поставил эту, очень красиво, но не могу понять идут клики или нет- платные! Кто подскажет!?!
  • 15 Ноября 2010 22:38
    korobas
    ау, ребят!
  • 17 Ноября 2010 18:55
    Igor
    как добавить скроллинг типа jScrollPane или подобный ?
  • 17 Января 2011 19:03
    jokeroot
    Круто;)
  • 3 Февраля 2011 12:04
    iusax
    spasiba balshoe samoe cennoe shto lijit na saite
  • 3 Февраля 2011 21:31
    iusax
    черт а как по умолчанию поставить радио на поиск в интернете?
  • 4 Февраля 2011 23:40
    iusax
    так и не кто не поможет?
    • 4 Ноября 2011 15:06
      tlustenko
      отметить радиокнопку как cheked="checked". будет отмечаться автоматически))
  • 24 Февраля 2011 14:16
    goo4i
    может не в тему, но возможно кто нибуть подскажет для joomla есть такие модули именно поиск только картинок по сайту и вывод их
  • 17 Марта 2011 17:45
    kalisto
    А у меня что-то не срабатывает поиск, я захожу на http://ajax.googleapis.com/ajax/services/search/ - Not Found правда и по-моему сайту не ищет...
  • 17 Марта 2011 19:33
    kalisto
    а с источника заработало! Спасиб Вам за столь красивый, функционально богатый урок по поиску.
  • 12 Мая 2011 04:50
    =
    по сайту не выводит почему то результаты
  • 20 Сентября 2011 21:09
    emil4eg
    норм
  • 20 Октября 2011 12:43
    toll
    а как результаты поиска выводить на другую страницу?
  • 21 Ноября 2011 02:08
    maxim068
    Классный поиск!!! Как только убираю файл стилей в папку "css" то оформление работает на половину. Фон есть, форма поиска есть, а кнопки не работают???
    • 1 Февраля 2014 20:23
      Оля Уветова
      <link rel="stylesheet" type="text/css" href="styles.css" />
      измени на
      <link rel="stylesheet" type="text/css" href="css/styles.css" />
  • 24 Декабря 2011 16:56
    stec_stec
    Вот www.setgis.ru
  • 9 Апреля 2012 00:09
    blob13
    Все понравилось. Есто только один вопрос. Как результаты поиска вывести на другой странице сайта? Помогите очень нужно!!!
    • 15 Июля 2012 14:21
      kazakmolda
      blob13 ты узнал как вывести на другой странице, потому что у меня такая же ситуация
  • 21 Мая 2012 14:53
    Medvedoc
    у меня в FF скрипт отказывается работать - не выводит результаты поиска. В других браузерах все отлично. При этом демка в мозилле отображается и работает.
  • 15 Июля 2012 14:21
    kazakmolda
    Как вывести результат поиска на другой странице, потому что у меня сама строка поиск стоит в header'е, и мне нужно чтобы он вывел на дргой странице
  • 28 Января 2013 20:23
    pashok_avia
    Ещё никто не догадался как вывести результат поиска на другой странице? Мне нужно сделать так, чтобы форма находилась на одной странице, а результаты поиска выводились на другой. Подскажите как это реализовать, пожалуйста.
    • 26 Февраля 2013 08:48
      siocco
      чувак это настройки браузера любого!!! программо можно сделать, только не всем это удобно
    • 6 Февраля 2014 21:03
      Оля Уветова
      Если так нужно,пройди по ссылке на оригинал,и посмотри решение Анастасии в комментариях.Лично я ничего не поняла даже с переводчиком.Поэтому.я предлагаю,- просто выведи всё на отдельной странице,и поиск,и результаты.Вставь на своей странице кнопку"поиск по сайту"
       <a href="demo.html" target="_blank"><img src="img/poisk.png" alt="кнопка вызова поиска по сайту"/></a>
      .Так лучше сделать,потому что данный поиск прописан на HTML5,и если ты просто поставишь его на свою страницу,ты сделаешь её тем самым не валидной.Но если у тебя весь сайт на HTML5,или тебе валидность побоку,тогда можно вывести и поиск, и результаты,-в модальное окно(поверх сайта).
  • 5 Сентября 2013 02:10
    b0nn1e
    Класная штука, и простая, жалко раньше не знал что такое есть) Спасибо Вам. Очень умный поиск в плане ошибок и раскладки. т.е мне нужно к примеру "jquery" то если я введу "ойгукн" все равно ищет нормально. Вопрос следующего плана, как можно вывести так что-бы в форме подсказка была как в гугле "возможно вы имели ввиду"? Может кто знает? Буду очень признателен
  • 14 Октября 2013 07:52
    oakss
    Подскажите, а как сделать что бы поиск выполнялся на конкретной странице? Смысл такой.... Вставляем данный код поиска в какой нибудь <?php require_once "includes/searching.php"; ?>а результаты что бы выводились на другую страницу... Бился, бился у самого не получается. Заранее спасибо
  • 30 Мая 2014 11:47
    oklaxoma
    Люди добрые, подскажите, как сделать, чтобы вытягивать записи из БД?
  • 26 Ноября 2014 23:53
    xox_ua
    А ведь Анастасия очень просто описала способ вывода результатов поиска на другую страницу. :) 1. Вставляем форму поиска к себе на страницу: <form method="post" action="search.php"> <input type="text" name="terms" value=""/> <input type="submit" name="action" value="search"> </form> 2. Переименовываем страницу demo.html (или search.html - в оригинале) в search.php. 3. В получившемся файле search.php меняем строку: <input id="s" type="text" /> НА: <input id="s" name="terms" type="text" size="15" value="<?php echo ( isset( $_POST['terms'] ) ? $_POST['terms'] : ""); ?>" /> 4. В файле search.php в самое начало страницы вставляем: <?php $terms = ( isset($_POST['terms']) ? $_POST['terms'] : (isset($_GET['terms']) ? $_GET['terms'] : "") ); ?> 5. В файле script.js в конце (или стр. 47) вставляем: $('#searchForm').submit(); И будет вам счастье! :)
  • 13 Ноября 2016 18:09
    dededededededede
    не ищет
^ Наверх ^