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

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

HIT

06.10.2016

1216

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

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

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

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

Тэги: ,

Поделится информацией с друзьями

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

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

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

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

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

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

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

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