Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями.

Подлючение скрипта и стилей

Подключаем все необходимые стили и скрипты

add_action( 'init', 'myprefix_autocomplete_init' );
function myprefix_autocomplete_init() {

    wp_register_style( 'myprefix-jquery-ui', plugins_url('/site-ajax-search.css', __FILE__));
    wp_register_script( 'my_acsearch', plugins_url('/myacsearch.js', __FILE__), array('jquery','jquery-ui-autocomplete'),null,true);
 
    add_action( 'get_search_form', 'myprefix_autocomplete_search_form' );
 
    add_action( 'wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions' );
    add_action( 'wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions' );
}



function myprefix_autocomplete_search_form(){
  
    wp_localize_script( 'my_acsearch', 'MyAcSearch', array('url' => admin_url( 'admin-ajax.php' )));
  
    wp_enqueue_script( 'my_acsearch' );
    wp_enqueue_style( 'myprefix-jquery-ui' );
}

Создание jquery передатчика

Содержимое подключенного файла со скриптом myacsearch.js
#s2 — этот id должен быть id input формы поиска!

jQuery(document).ready(function ($){
    var acs_action = 'myprefix_autocompletesearch';
    $("#s2").autocomplete({
        source: function(req, response){
            $.getJSON(MyAcSearch.url+'?callback=?&action='+acs_action, req, response);
        },
        select: function(event, ui) {
            window.location.href=ui.item.link;
        },
        minLength: 3,
    });
});

Функция обработчик

function myprefix_autocomplete_suggestions(){
    // Query for suggestions
    $posts = get_posts( array(
        's' =>$_REQUEST['term'],
    ) );
 
    // Initialise suggestions array
    $suggestions=array();
 
    global $post;
    foreach ($posts as $post): setup_postdata($post);
        // Initialise suggestion array
        $suggestion = array();
        $suggestion['label'] = esc_html($post->post_title);
        $suggestion['link'] = get_permalink();
 
        // Add suggestion to suggestions array
        $suggestions[]= $suggestion;
    endforeach;
 
    // JSON encode and echo
    $response = $_GET["callback"] . "(" . json_encode($suggestions) . ")";
    echo $response;
 
    // Don't forget to exit!
    exit;
}

Настройки обработчика

Обработчик в том виде как он здесь представлен ищет по стандартным типам записей — post. Чтобы поиск выдавал, например товары woocommerce нужно в запросе get_posts указать тип записи ‘post_type’ => ‘product’. Также исходно при вводе выпадает 5 вариантов (5, потому что у get_posts — это количество по-умолчанию). Чтобы сделать другое количество вариантов — надо добавить строку ‘numberposts’ => 10.

Стили CSS

Данный стиль — это сильно сокращенная версия подключаемого стиля jquery-ui.css

/* Варианты при вводе в поиск */

.ui-helper-hidden-accessible {display: none;}

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-autocomplete { position: absolute; cursor: default; }	

* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

.ui-menu {
	list-style:none;
	padding: 2px;
	margin: 0;
	display:block;
	float: left;
	background-color: #fff;
    border: 1px solid #2196F3;
	z-index: 99;
}
.ui-menu .ui-menu {margin-top: -3px;}

.ui-menu .ui-menu-item {
	margin:0;
	padding: 2px 0;
	float: left;
	clear: left;
	width: 100%;
}
.ui-menu .ui-menu-item a {
	text-decoration:none;
	display:block;
	padding:.2em .4em;
	line-height:1.5;
	zoom:1;
}

.ui-state-focus {background-color: #a4e3ff; cursor: pointer;}

Поделиться в соц. сетях: