В этой небольшой заметке хотел поделиться решением, как реализовать поиск по записям, страницам или произвольным постам без перезагрузки. Предложенная идея — часть оптимизации работы административной части сайта. Принцип работы довольно прост. Администратор вводит поисковый запрос, скрипт получает данные из поля ввода и налету загружает наиболее подходящие варианты.

Для выполнения данной задачи, вначале создайте файл ajax-admin.js. Разместите его в папку js вашей темы. Все что нам нужно — подключить js файл в админке WordPress, и разместить в нем следующий код:

jQuery(document).ready(function($) {

	function ajax_admin_search_update_search() {
		s = a.val().replace(' ', '+');
		var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for (var i = 0; i < url.length; i++) {
			if (/(^s$)|(\bs=.*\b)|(\bs=)/g.test(url[i]) === true || /http.*/g.test(url[i]) === true) y = i;
		}
		if (typeof y === 'undefined') url.unshift('s='+s);
		else url[y] = 's='+s;
		url = url.join('&');
		url = window.location.pathname+'?'+url;


		$.get(url, {}, function(data) {
			var r = $('<div />').html(data);
			var table = r.find(z);
			var tablenav_top = r.find(tnt);
			var tablenav_bottom = r.find(tnb);
			$(z).html(table);
			$(tnt).html(tablenav_top);
			$(tnb).html(tablenav_bottom);
		},'html');

		$(document).ajaxStop(function() {
			if(s.length) {
				history.pushState({}, "after search", url);
			} else {
				history.pushState({}, "empty search", url);
			}
		});

	}

	$(function() {
		a = $('input[type="search"]');
		t = a.closest('form').find('table');
		if(!t.length) t = a.closest('div').find('table');
		if(!t.length) return;
		z = '.'+t.attr('class').replace(/\s/g, '.');
		tn = '.top .displaying-num';
		bn = '.bottom .displaying-num';
		tpl = '.top span.pagination-links';
		bpl = '.bottom span.pagination-links';
		tnt = '.tablenav.top';
		tnb = '.tablenav.bottom';
		var timer;
		a.on('keyup', function(event) {
			if (timer) clearTimeout(timer);
			timer = setTimeout(ajax_admin_search_update_search, 300);
		});
	});
});

Подключаем созданный script файл в админке с помощью функции в function.php:

add_action( 'admin_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/ajax-admin.js');
}

Теперь все готово. Проверьте работоспособность поиска по записям.

1 комментарий к записи

Добавить комментарий