JSFiddle - React, Tailwind, and code Playground

by Axiniya

HTML

<form class="search-panel" role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
			<input type="text" value="' . get_search_query() . '" name="s" class="search-input" id="s" placeholder="Я ищу..." />
			<button class="search-button"><img src="http://localhost/wp-content/uploads/2022/02/search-button-desktop.png" alt=""></button>
			<button class="search-button-hover"><img src="http://localhost/wp-content/uploads/2022/02/search-button-desktop-hover.png" alt=""></button>
		</form>
		<div class="result-search">
			<div class="show-placeholder"> <span>Начните поиск</span> </div>
			<div class="preloader"><img src="' . get_bloginfo('template_directory') .'http://localhost/wp-content/uploads/2022/02/loading.gif" class="loader" /></div>
			<div class="result-search-list"></div>
		</div>

CSS

.search .result-search {
    display: none;
}

.search .result-search {
    position: absolute;
    width: 100%;
    z-index: 50;
    display: none;
}

.search .result-search .preloader {
    width: 100%;
    display: none;
    background: #fff;
    border-top: none;
    border: 1px solid #eee;
}

.search .result-search .preloader .loader {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
}

.search .result-search .result-search-list {
    width: 100%;
    display: none;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border-top: none;
    border: 1px solid #eee;
}

.search .result-search .result-search-list .result_item {
    line-height: 15px;
    width: 100%;
    display: block;
    box-sizing: border-box;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
    margin-top: 10px;
}

.search .result-search .result-search-list .result_item:first-child {
    margin-top: 0;
}

.search .result-search .result-search-list .result_item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.search .result-search .result-search-list .result_item a {
    color: #7c83a0;
    margin-bottom: 5px;
    display: block;
}

.search .result-search .result-search-list .result_item span {
    height: 100%;
    float: left;
    min-height: 100px;
}

.search .result-search .result-search-list .result_item p {
    line-height: 13px;
    font-size: 13px;
    color: #7c83a0;
    font-style: italic;
    background-color: white;
}

.search .result-search .result-search-list .result_item img {
    display: none;
}
/*end result-search*/

.search-panel {
    height: 50px;
    background: #8AB6FF;
    border-radius: 30px;
    display: flex;
    padding: 3px;
    flex-grow: 10;
}

.search-panel.visible {
    border-radius: 30px 30px 0 0;
}

.search-button-hover {
    display: none;
}

.search-panel.visible>.search-button-hover {
    display: block;
    background: white;
    border-radius: 30px;
   ...

JavaScript

jQuery(function($){
	var searchTerm = '';
	
	$('.search-input').keydown(function(){
		searchTerm = $.trim($(this).val());
	});
		
	$('.search-input').keyup(function(){
		if ($.trim($(this).val()) != searchTerm) { // Если новое значение не равно старому, идем дальше
			searchTerm = $.trim($(this).val());
			if(searchTerm.length > 2){ // Если введено больше 2-х символов, идем дальше
				$.ajax({
					url : '/wp-admin/admin-ajax.php', // Ссылка на AJAX обработчик WP
					type: 'POST', // Отправляем данные методом POST
					data: {
						'action' : 'ba_ajax_search', // Вызываемое действие, которое мы описали в functions.php
						'term' : searchTerm // Отправляемые данные поля ввода
					},
					beforeSend: function() { // Перед отправкой данных
						$('.result-search .result-search-list').fadeOut(); // Скроем блок результатов
						$('.result-search .result-search-list').empty(); // Очистим блок результатов
						$('.result-search .preloader').show(); // Покажем загрузчик
					},
					success: function(result) { // После выполнения поиска
						$('.result-search .preloader').hide(); // Скроем загрузчик
						$('.result-search .result-search-list').fadeIn().html(result); // Покажем блок результатов и добавим в него полученные данные
					}
				});
			}
		}
	});
	
	$('.search-input').focusin(function() {
		$('.result-search').fadeIn();
		 $('.search-panel').addClass("visible");
	});
	
	$(document).mouseup(function(e) {
		if ((!$('.result-search').is(e.target) && $('.result-search').has(e.target).length === 0) && (!$('.search-input').is(e.target) && $('.search-input').has(e.target).length === 0)) {
			$('.result-search').fadeOut();
			$('.search-panel').removeClass("visible");
		}
	});

	$(document).ready(function(){
		if ($('.result-search-list:visible')) 
		{
			$('.show-placeholder').css("background-color", "red");
		} 
	});

});