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

beliyadm

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Итак, общие аспекты создания поиска по сайту с применением 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 »
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

Antosha

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

beliyadm

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

beliyadm

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

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
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

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #6 : 19.10.2009, 21:05:34 »
именно так
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

Antosha

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

beliyadm

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

Shustry

  • Гуру
  • 6436
  • 743 / 3
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #9 : 21.10.2009, 09:27:55 »
+1 к желающим. Очень понравилась реализация  :D
*

vdm

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

Yurets

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

beliyadm

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

vdm

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

stadion

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

beliyadm

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #15 : 25.10.2009, 04:48:58 »
Сообразил по быстрому инсталляционную бета версию - тут
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

SmokerMan

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

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
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

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

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

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
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

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

b2z

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

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

SmokerMan

  • Гуру
  • 5293
  • 720 / 26
*

beliyadm

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

b2z

  • Глобальный модератор
  • 7084
  • 768 / 0
  • Разраблю понемногу
*

Sulpher

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

SmokerMan

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

palexa

  • Завсегдатай
  • 1103
  • 87 / 0
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #27 : 24.02.2011, 22:36:08 »
А я вот так и непонял
Цитировать
4 - и собственно код обработчика (в моем случае это компонент com_pbajax и в нем кейс ajaxsearch
Куда этот код писать ?
*

osgood

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

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

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



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

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

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

beliyadm

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Re: Создаем AJAX поиск по сайту (jquery)
« Ответ #29 : 31.12.2011, 12:40:55 »
У этого модуля, если я правильно помню, при количестве большем чем несколько появляются кнопочки листания результатов поиска
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

360 Zoomer - jQuery вращалка с возможностью увеличения изображения

Автор effrit

Ответов: 2
Просмотров: 199
Последний ответ 01.04.2019, 22:21:22
от effrit
Как реализовать JavaScript поиск по странице?

Автор dm-krv

Ответов: 1
Просмотров: 179
Последний ответ 27.01.2019, 23:03:59
от Alldar
JQuery: как проигнорировать cors при парсинге? [РЕШЕНО]

Автор dm-krv

Ответов: 20
Просмотров: 735
Последний ответ 17.01.2019, 20:11:58
от fsv
Некоторые приемы работы с jQuery. (the-end.info)

Автор ich_heise_tod

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