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

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

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

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
Делаем Анимацию в After Effects на сайт
Card image cap
Товары что нет в наличие в конце списка в теме journal2 opencart 2.1
Card image cap
Загружам сss Асинхронно

коммент.

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;

Contact

info@pechenki.top

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

© SiteBlog designer