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

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

HIT

06.10.2016

1493

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

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

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

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/
Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

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

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

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