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

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

869 modx Aвтор:
Рейтинг: 5/5 - 1 голосов

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

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

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

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

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

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

<div class="sisea-result-castom">
    <span><img src="" alt="img">
         <a href="" title=""></a>
         </span> 
         <span>от </span>
         <span class="old"> </span>
         <span class="new"> руб.</span>
    <div class="extract"><p></p></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
Сайты помошники для начинающих фрилансеров и профи.
Card image cap
Woocommerce Перевод цены товара по курсу приват банка
Card image cap
Хлебные крошки worpdress от Kama_Breadcrumbs с itemprop="position"

коммент.

avatar

Артем

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

Admin

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

Контакти

Contact

info@pechenki.top

Начать чат со мной

© SiteBlog designer