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

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

HIT

06.10.2016

1727

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

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

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

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

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

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

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

/
Фильтр по меткам (изменение основного запроса)

Фильтр по меткам (изменение основного запроса)

Реализуем фильтрацию записей по меткам путем изменения основного запроса на лету (ajax). Находим все теги записей входящих в категорию Данный код можно вставить в боковую колонку в виде виджета. <?php Читать далее »

/ /

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

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

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