0 Пользователей и 1 Гость просматривают эту тему.
  • 29 Ответов
  • 19446 Просмотров
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Итак, общие аспекты создания поиска по сайту с применением AJAX. В чем суть - при вводе\удалении каждого символа в поле поиска обращаемся к БД и показываем совпадения
Рабочий пример здесь (справа вверху поле поиска, можете искать по словам "егэ, приказ, министерство" и подобным для демонстрации)
Сообразил по быстрому инсталляционную бета версию - тут
На деталях останавливаться не буду, кому интересно без проблем разберутся

1 - подключаем Jquery (я беру с гугля версию 1.3.2)
Код: html4strict
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2 - в HEAD шаблона подключаем следующий JS
Код: javascript
function lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$.post("index.php?option=com_pbajax&amp;task=ajaxsearch&amp;no_html=1", {queryString: ""+inputString+""}, function(data) {
$('#suggestions').fadeIn();
$('#suggestions').html(data);
});
}

$("input").blur(function(){
$('#suggestions').fadeOut();
});
}
В моем случае я использую собственный компонент com_pbajax с набором определенных тасков, один из которых ajaxsearch и обрабатывает результаты поиска его код ниже

3 - модифицируем шаблон модуля поиска, в моем случае он выглядит так (готовый хтмл на выходе)
Код: html4strict
<form action="index.php"  method="post" class="search" name="zform">
<input name="searchword" id="inputString" onkeyup="lookup(this.value);" maxlength="20" class="inputbox" type="text" size="20" value="поиск по сайту"  onblur="if(this.value=='') this.value='поиск по сайту';" onfocus="if(this.value=='поиск по сайту') this.value='';" />
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="task"   value="search" />
</form>
То есть по событию onkeyup вызываем нашу функцию lookup и отдаем ей на обработку введенное значение

4 - и собственно код обработчика (в моем случае это компонент com_pbajax и в нем кейс ajaxsearch
Код: php
case 'ajaxsearch';
$queryString = JRequest::getVar( 'queryString', 1, 'post' );

$db = JFactory::getDBO();
$user =& JFactory::getUser();

require_once(JPATH_SITE.DS.'components'.DS.'com_content'.DS.'helpers'.DS.'route.php');
require_once(JPATH_SITE.DS.'libraries/phputf8/utf8.php');

   $nullDate = $db->getNullDate();
$date =& JFactory::getDate();
$now = $date->toMySQL();

$query = 'SELECT a.*, '
. ' CASE WHEN CHAR_LENGTH(a.alias) THEN CONCAT_WS(":", a.id, a.alias) ELSE a.id END as slug,'
. ' CASE WHEN CHAR_LENGTH(cc.alias) THEN CONCAT_WS(":", cc.id, cc.alias) ELSE cc.id END as catslug'
. ' FROM #__content AS a'
. ' INNER JOIN #__categories AS cc ON cc.id = a.catid'
. ' INNER JOIN #__sections AS s ON s.id = a.sectionid'
. ' WHERE a.title LIKE "%'.$queryString.'%" OR a.introtext LIKE "%'.$queryString.'%" '
. ' AND a.state = 1'
. ' AND cc.published = 1'
. ' AND s.published = 1'
. ' AND a.access <= '.(int) $user->get( 'aid' )
. ' AND cc.access <= '.(int) $user->get( 'aid' )
. ' AND s.access <= '.(int) $user->get( 'aid' )
. ' AND ( a.publish_up = '.$db->Quote($nullDate).' OR a.publish_up <= '.$db->Quote($now).' )'
. ' AND ( a.publish_down = '.$db->Quote($nullDate).' OR a.publish_down >= '.$db->Quote($now).' )'
. ' ORDER BY title  LIMIT 10'
;

if ($queryString != '') {
$db->setQuery($query);
$rows = $db->loadObjectList();
$html = '<div id="searchresults">';
       $n = count($rows);
       $i = '1';
if ($n) {
$html .= '<ul class="searchresultsli">';
foreach ( $rows as $row )
{
$link = ContentHelperRoute::getArticleRoute($row->slug, $row->catslug, $row->sectionid);

$class = '';
if ($i%'2'=='0') {
$class = 'odd';
} else {
   $class = 'even';
}

$html .= '<li class="'.$class.'">';
$html .= $i.' - ';
$title = str_replace($queryString, '<span class="highlight">'.$queryString.'</span>', utf8_strtolower($row->title));
$html .= '<a href="'.$link.'">'.$title.'</a>';
$html .= '</li>';
$i++;
}
$html .= '</ul>';
} else {
        $html .= 'По Вашему запросу ничего не найдено';
}
$html .= '</div>';
} else {}

echo $html;

break;
Чуть пошагово:
1 - подключили роутер контента и utf8.php для отработки utf8_strtolower (можете этого и не делать)
2 - запрос вытягивает заголовок материала и вступительный текст на предмет поиска совпадений с ключевым запросом $queryString
3 - регуляркой обрабатываем заголовок и подсвечиваем искомое слово в выдаче (в моем случае результат выдается только заголовком, потому если совпадение с $queryString найдено в introtext то в заголовке выдачи подсвечивать нечего)
4 - добавляем классы odd\even для чередования строк (можно и на квери делать, но почему то стало лень)

5 - в нужное место вешаем див для показа результатов поиска, у меня он висит в индексе шаблона
Код: php-brief
<div id="suggestions"></div>
И оформляем CSS стили положение блока и собственно результатов поиска
Код: css
/* AJAX search */
#suggestions { position: absolute; width:350px; display:none; z-index: 100; right: 20px; top: 75px;}
#suggestions {border: 1px solid #ABD2DE; background-color: #DEEFF4; padding: 10px;text-align: left; color: #1F579A; font-size: 12px;}
#suggestions a, #suggestions li {color: #1F579A; font-size: 12px; text-decoration: none;}
#suggestions a:hover {text-decoration: underline;}
ul.searchresultsli, ul.searchresultsli li {margin: 0px; padding: 0px; background-image: none; list-style: none;}
ul.searchresultsli li {padding: 7px 5px 7px 3px;}
ul.searchresultsli li.odd {background-color: #F4F1E1;}
a.highlight {color: #FE9500 !important; font-weight: bold;}

После этого получаем красивый поиск и пищу для дальнейших модификаций
Мопед не мой, автор идеи Marco Kuiper, за что ему отдельное спасибо
Готового модуля делать не буду, разобраться думаю не составляем проблем

P.S. большая нагрузка на БД
« Последнее редактирование: 31.10.2009, 20:07:35 от beliyadm »
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Antosha

  • Завсегдатай
  • 420
  • 52
  • Плохо спорить плохо
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #1 : 19.10.2009, 20:45:02 »
AJAX начинает работать уже на первом же символе, надо сделать фильтр, и хотя бы до 4-5 символов поиск в базе не производить. Для аббревиатуры можно сделать и 3 символа, и обрабатывать что ввел пользователь, до того как посылать запросы к базе. То есть, если поисковое слово меньше 5 символов, то ищем в словаре аббревиатуру, остальные же слова должны быть больше 4 символов. Возможно так можно снизить нагрузку на БД. Может так? Так же было бы совсем не плохо сделать кешь для наиболее частых поисковых запросов.
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

Antosha

  • Завсегдатай
  • 420
  • 52
  • Плохо спорить плохо
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #2 : 19.10.2009, 20:47:35 »
и можно чуть подробнее, что сделать, если com_pbajax у меня нет?
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #3 : 19.10.2009, 20:47:56 »
В рабочем релизе поиск будет производится после 3-х набранных символов (то есть снижаем нагрузку)
По поводу кеширования пока в размышлениях как реализовать, будет обязательно.
Но данный топик показывает базово возможно данной реализации как пища для размышлений, дальше дело вашей фантазии и рук :)
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #4 : 19.10.2009, 20:49:04 »
и можно чуть подробнее, что сделать, если com_pbajax у меня нет?
сделать собственный компонент с данной функцией либо добавить в любой другой. Можно оформить и отдельным файлом где подключать функции ядра, но мне было проще так (там много чего другого у меня написано).
Вопросы "как сделать этот компонент" я рассматривать не буду
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Antosha

  • Завсегдатай
  • 420
  • 52
  • Плохо спорить плохо
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #5 : 19.10.2009, 21:04:09 »
Ок. Если я сделаю так:
Эту $.post("index.php?option=com_pbajax&amp;task=ajaxsearch&amp;no_html=1".... строчку перепишу так:

$.post("MYFILE.php?",.....

а в файл MYFILE помещу CASE из com_pbajax, ну соответственно без case будет работать? Просто самая основная работа делается в этом коде и он самый главный.... =((((
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #6 : 19.10.2009, 21:05:34 »
именно так
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Antosha

  • Завсегдатай
  • 420
  • 52
  • Плохо спорить плохо
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #7 : 19.10.2009, 21:08:21 »
Спасибо за модную фичу. =))
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #8 : 20.10.2009, 04:51:08 »
P.S. если наберется больше 5 человек желающих - сделаю в виде готового модуля
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Shustry

  • Группа развития
  • 6430
  • 735
  • Рисую дизайны
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #9 : 21.10.2009, 09:27:55 »
+1 к желающим. Очень понравилась реализация  :D
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

vdm

  • Новичок
  • 8
  • 0
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #10 : 23.10.2009, 01:00:10 »
Так же присоединюсь к страждущим
*

Yurets

  • Завсегдатай
  • 411
  • 92
  • Губернатор острова Борнео
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #11 : 23.10.2009, 01:17:04 »
[spoiler title=Не нажимать]Товарищи "плюсадин'щики"! Подписавшись за готовое решение, Вы сами лишаете себя кайфа от собственноручной реализации этого хака! Неужели не хочется посреди ночи разбудить всех родных криком "Ур-р-ра! Заработало-о-о!"?[/spoiler]
В комнате с белым потолком
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #12 : 23.10.2009, 01:27:48 »
Yurets - не боись, мне то в принципе дело недолгое модуль наваять из готового, а вот товарищам после разгребать конфликты на своих варезных шаблонах с кучей сторонних JS скриптов (проблемы коих я решать никак не собираюсь :))
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

vdm

  • Новичок
  • 8
  • 0
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #13 : 23.10.2009, 09:59:50 »
Ну, не у всех варезные шаблоны.
*

stadion

  • Осваиваюсь на форуме
  • 26
  • 1
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #14 : 23.10.2009, 23:32:57 »
Присоединюсь пожалуй . Модуль оно как говорится - вещь хорошая :)
Я иду на русский марш
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #15 : 25.10.2009, 04:48:58 »
Сообразил по быстрому инсталляционную бета версию - тут
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

SmokerMan

  • Профи
  • 5333
  • 689
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #16 : 04.01.2010, 16:59:57 »
Yurets - не боись, мне то в принципе дело недолгое модуль наваять из готового, а вот товарищам после разгребать конфликты на своих варезных шаблонах с кучей сторонних JS скриптов (проблемы коих я решать никак не собираюсь :))
а на стандартном mootools не вариант сделать, да? :)
*

userxp

  • Практически профи
  • 2054
  • 397
  • Злой и ужасный бармалей
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #17 : 04.01.2010, 17:14:37 »
вот я тоже читаю и понять не могу - зачем тут "лишних" 50 кило от JQ, если в 1.5 уже есть МТ?
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

b2z

  • Support Team
  • 7469
  • 742
  • Разраблю понемногу
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #18 : 04.01.2010, 17:17:35 »
вот я тоже читаю и понять не могу - зачем тут "лишних" 50 кило от JQ, если в 1.5 уже есть МТ?
Любим мы JQ, а MT - нет. Почему? Не знаю...

SmokerMan - сделай на MT, получишь + ;)
*

userxp

  • Практически профи
  • 2054
  • 397
  • Злой и ужасный бармалей
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #19 : 04.01.2010, 17:27:17 »
МТ я тож нелюблю, но элементарные функции можно сделать и без JQ, тем более, что они тут оч похожи.
а насчет сделать... ну дык у кого время-то есть?
 ::)
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

SmokerMan

  • Профи
  • 5333
  • 689
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #20 : 04.01.2010, 17:35:27 »
SmokerMan - сделай на MT, получишь + ;)
не думаю что это будет сложно.
О результатах доложу  ^-^
*

b2z

  • Support Team
  • 7469
  • 742
  • Разраблю понемногу
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #21 : 04.01.2010, 17:37:34 »
не думаю что это будет сложно.
О результатах доложу  ^-^
Настоящий полковник  yes!

МТ я тож нелюблю, но элементарные функции можно сделать и без JQ, тем более, что они тут оч похожи.
а насчет сделать... ну дык у кого время-то есть?
 ::)
В точку   :dry:
*

SmokerMan

  • Профи
  • 5333
  • 689
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #23 : 04.01.2010, 22:11:13 »
Большинство фишек что я делаю - делаю на jquery, потому что мне больше нравится, лучше 50 кБ сжатого с гугля квери, нежели 70 кБ стандартного мутулза. Ну и мутулз вырезается на уровне шаблона, так что ничего лишнего нет.
И кстати если мне не изменяет память, то поиск фофx\mootools уже есть, к примеру тут и где то еще встречал
МТ я тож нелюблю, но элементарные функции можно сделать и без JQ, тем более, что они тут оч похожи.
естессно, но если у меня весь сайт построен на JQ (табличный грид, верстка, эффекты и прочий ajax) - подумал что грех не поделится идеей
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
*

Sulpher

  • Практически профи
  • 2137
  • 374
  • Шаблоны и расширения Joomla
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #25 : 06.02.2010, 23:49:05 »
Я практически на всех сайтах отключаю MT и подключаю JQ со всеми прелестями, следовательно, каждое решение под конкретный случай - вот мне такой модуль полезен. Те, кто хочет аналогичный модуль на Mootools, берите и используйте RokAjaxSearch (GNU/GPL).
*

SmokerMan

  • Профи
  • 5333
  • 689
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #26 : 07.02.2010, 00:40:59 »
Я практически на всех сайтах отключаю MT и подключаю JQ со всеми прелестями, следовательно, каждое решение под конкретный случай - вот мне такой модуль полезен. Те, кто хочет аналогичный модуль на Mootools, берите и используйте RokAjaxSearch (GNU/GPL).
да модулей поиска на mootools полно. Выбирай не хочу.
а уж какую библиотеку использовать это кому как по душе.
*

palexa

  • Живу я здесь
  • 941
  • 86
  • В следующей жизни, я буду кошкой
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #27 : 24.02.2011, 22:36:08 »
А я вот так и непонял
Цитировать
4 - и собственно код обработчика (в моем случае это компонент com_pbajax и в нем кейс ajaxsearch
Куда этот код писать ?
Мои записки.
Мой хостинг лучший
Не пытайтесь спорить с дебилом. Иначе вы опуститесь до его уровня, где он задавит вас своим опытом.
Иногда кажется, что весь мир против тебя. Но это всего лишь кажется. На самом деле на тебя всем насрать.
*

osgood

  • Новичок
  • 7
  • 0
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #28 : 31.12.2011, 11:13:52 »
Добрый день!

Подскажите, пожалуйста.. Есть модуль поиска (ajax, как я понимаю) из шаблона от YooTheme. Модуль вполне обычный.

Вот настройки данного модуля..



в дополнительных параметрах только:
- Альтернативный макет
- Суффикс CSS-класса модуля
- Кэширование
- Срок кэширования

В разделе "Менеджер плагинов: Поиск - Контент" - Общие настройки - есть кол-во выводимых метариалов. По умолчанию 50. Если поставить, скажем, 3 - то и в выпадающих результатах будет 3 выводиться. НО! Если поставить больше шести - выпадающих все равно максимум шесть появляется :(

Где копать? Заранее благодарен всем откликнувшимся!
*

beliyadm

  • Профи
  • 8368
  • 1527
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #29 : 31.12.2011, 12:40:55 »
У этого модуля, если я правильно помню, при количестве большем чем несколько появляются кнопочки листания результатов поиска
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Некоторые приемы работы с jQuery. (the-end.info)

Автор ich_heise_tod

Ответов: 0
Просмотров: 2786
Последний ответ 01.01.2012, 18:49:42
от ich_heise_tod