/ Scripts & jquery / Варианты при вводе запроса в поиск

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

HIT

06.10.2016

1665

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

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

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

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;}

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

  • Похожие записи
  • Комментарии
  • Вложения
Опросы на сайте без плагина

Опросы на сайте без плагина

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно. Как создать функционал опросов с помощью плагинов описано здесь. Создадим форму опроса для Читать далее »

Загрузка контента без перезагрузки

Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax Создаем тестовую верстку <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1"> <input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2"> </form> <div id="contentBody"></div> <div id="loading" style="display: none"> Идет Читать далее »

Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/

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

Пока нет комментариев. Будь первым!

Варианты при вводе запроса в поиск
Стили текста
Рекомендации для васСтили текстаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.