SimpleSearch ajax - Живой поиск Modx /

SimpleSearch — простой плагин для реализации поиска на modx. Модернизируем его и сделаем ajax поиск

07 / 08 / 2018 2374 modx Aвтор: Фрилансер

SimpleSearch ajax - Живой поиск Modx

Поиск на сайте очень полезен. А если это каталог или магазин, тогда это просто необходимо. Пересмотрев много решений я нашел простое дополнение SimpleSearch и немного доработал его 

SimpleSearch ajax,  Живой поиск Modx, ajax поиск modx, поиск modx

Вот как это работает. Доволе быстро. Как же это реализовано.?

Сначала  ставим дополнение   SimpleSearch вся документация по ссылке .

создаем чанк searchtpls который будет отображатся при запросе ajax.

<div class="sisea-result-castom">
 
  <div class="resultsearch">[[+idx]]. <a href="[[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]" title="[[+longtitle]]">[[+pagetitle]]</a></div>
    
</div>

Далее создаем ресурс с параметрами: Не показывать в меню, Опубликован, 

Кэшируемый-снять.

Пвсевдоним — simplesearch

Содержимое

<div class="search-ajax-results">
     [[!SimpleSearch? &tpl=`searchtpls` ]]
       
</div>

все необходимое создано. Далее в шаблоне где нужно вывести форму

landing- указать id ресурса где будет показан результат поиска после нажатия на кнопку поиска

[[!SimpleSearchForm? &landing=`40` &tpl=`search`]]
<div id="search-ajax-results-wrap"></div> блок в который выводится результат поиска ajax

Далее нужно вставить js код 

найдем simplesearch.html/

и замените на свою псевдоним

в коде.

$("#search-ajax-results-wrap").load("/simplesearch.html/ .search-ajax-results",$(".sisea-search-form").serialize()).slideDown("fast");

 // Кнопка 
    	$(".search").submit(function () {
            // раскоментировать если нужна кнопка
           // $("#search-ajax-results-wrap").load("/simplesearch.html/ .search-ajax-results",$(".search").serialize()).slideDown("fast"); 
            return false;
    	});
    	// Живой поиск
    	$("#searchId").keyup(function() {
    		if(this.value.length > 2) { // Пользователь набирает больше 2 символов в строке поиска
    			// скрывает/отображает с результаты за пределами окна
    			$(document).click(function(event){ // скрываем
    				if ($(event.target).closest(".search-ajax-results-wrap").length) return;
    				$(".search-ajax-results-wrap").slideUp("fast");
    				//event.stopPropagation();
    			});
    			$('#search').click( function() { // отображаем
    				$(".search-ajax-results-wrap").slideDown("fast");
    				return false;
    			});	
    			// ajax запрос загрузка результатов поиска от страницы и показ контейнера
    		      var parsesearc = $("#search-ajax-results-wrap").load("/simplesearch.html/ .search-ajax-results",$(".sisea-search-form").serialize()).slideDown("fast");
    		      $("#search-ajax-results-wrap").html(parsesearc.find('.results .sisea-result'));
    		     console.log(parsesearc.find('.sisea-result'));	   
    		}
    		else {
    		    // Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;)
    			$("#search-ajax-results-wrap").slideUp("fast"); 
    		}
    	});
  
  

 

3 случайных Поста

Card image cap
Мини галерея товара в категории Opencart 2.x
Card image cap
Telsender bot telegram
Card image cap
Разбиваем строку название товара woocommerce

коммент.

avatar

Артем

- 30 ноября 2018, 13:37
Какой tpl для формы?
avatar

Admin

- 30 ноября 2018, 13:45
Тут вся инфа ТЫк
avatar

zzherik

- 27 декабря 2018, 09:30
А как сделать, чтобы не только живым поиском находило, но и по нажатию на кнопку Enter переходило на страницу с результатами поиска?
avatar

Admin

- 27 декабря 2018, 09:39
По enter оно переходит на страницу поиска.
а если нужна кнопка. в скрипте есть закоментированаа строка
$(".search").submit(function () {
            // раскоментировать если нужна кнопка
           // $("#search-ajax-results-wrap").load("/simplesearch.html/ .search-ajax-results",$(".search").serialize()).slideDown("fast"); 
            return false;

© SiteBlog designer