Пытаюсь приколхозить 3 кнопки многими методами
<ul class="main-header">
<li class="main-header__item searchbar">
<div class="search">
<div class="search__form search-form">
<div class="search-form__form">
<div class="search-box-top">
<div class="m-search-content">
<span id="close-mobile-search_1" class="search-form__clear-button_1 hidden" >
<i class="fa fa-arrow-left"></i>
</span>
<input type="search" name="search" class="col-xs-10 story-top_mobile" id="story-top" value="" placeholder="Поиск товаров">
<input type="submit" id="msearch_897324" class="col-xs-2 top-search-submit hidden" value="Найти">
<span id="close-mobile-search" class="search-form__clear-button hidden" >
<i class="fa fa-times"></i>
</span>
<label for="msearch_897324" class="col-xs-2 search-form__submit-button"><i class="fa fa-search"></i></label>
<div class="mobile-search-result"></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
Суть вот в чем:
1.Что бы при нажатии на поле ввода
#story-top, к классу
main-header добавлялся класс
main-header--active-searchbar
2. При вводе текста должна появляться кнопка
#close-mobile-search которая будет очищать поле ввода и удалять класс
main-header--active-searchbar а так же скрываться потому что поле ввода пустое.
3. Так же при нажатии на
close-mobile-search_1 и
close-mobile-search очищалось поле ввода и удалялся класс
main-header--active-searchbar.
Ещё при вводе текста в поле блоку
mobile-search-result присваивается
display:block; и при пустом поле блок получает display:none;
Проблема в том что при моем колхозном методе не нажимается кнопка поиска с первого раза
search-form__submit-button, а изначально удаляется класс
main-header--active-searchbar а потом нужно второй раз нажимать на поиск
Всё это пробую реализовать данным кодом
const
searchInput = document.querySelector('.story-top_mobile'),
clearButton = document.querySelector('.search-form__clear-button');
clearButton.addEventListener('click', function() {
searchInput.value = '';
searchInput.dispatchEvent(new Event('input'));
});
searchInput.addEventListener('input', function() {
clearButton.classList.toggle('hidden', !this.value);
});
document.getElementById("close-mobile-search").onclick = function(e) {
document.getElementById("story-top").value = "";
};
var $search = $('#story-top');
$search.on('click', function () {
$(".main-header").addClass('main-header--active-searchbar');
});
$search.on('click', function () {
$(".mobile-search-result").removeClass('hidden');
});
$search.on('click', function () {
$(".search-form__clear-button_1").removeClass('hidden');
});
$search.on('blur', function () {
$(".main-header").removeClass('main-header--active-searchbar');
});
$search.on('blur', function () {
$(".mobile-search-result").addClass('hidden');
});
$search.on('blur', function () {
$(".search-form__clear-button").addClass('hidden');
});
$search.on('blur', function () {
$(".search-form__clear-button_1").addClass('hidden');
});
Может есть более менее проще вариант с исправлением бага кнопки поиска ?