Как заставить работать кнопки в блоке поиска правильно?

Question

[Neowaring]

Пытаюсь приколхозить 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');
                            });

Может есть более менее проще вариант с исправлением бага кнопки поиска ?

Comments

[WapSter]

Песочницу запили. И зачем мешаешь код jQuery и ванилы?

Answer 1

[Neowaring]

Решено таким способом

var $search = $('#story-top');
                            var $button_left = $('#close-mobile-search_1');
                            var $button_times = $('#close-mobile-search');
                            var $search_block = $('.search-box-top');
                            $search.on('click', function () {
                                $(".main-header").addClass('main-header--active-searchbar');
                                $(".story-top_mobile").addClass('story-top_mobile_active');
                                $(".mobile-search-result").removeClass('hidden');
                                $(".search-form__clear-button").removeClass('hidden');
                                $(".search-form__clear-button_1").removeClass('hidden');
                            });
                            $button_left.on('click', function () {
                                $(".main-header").removeClass('main-header--active-searchbar');
                                $(".search-form__clear-button_1").addClass('hidden');
                                $(".search-form__clear-button").addClass('hidden');
                                $(".mobile-search-result").addClass('hidden');
                                $(".story-top_mobile").removeClass('story-top_mobile_active');
                            });
                            $button_times.on('click', function () {
                                document.getElementById("story-top").value = "";
                                $(".search-form__clear-button").addClass('hidden');
                                $(".search-form__clear-button_1").addClass('hidden');
                                $(".mobile-search-result").addClass('hidden');
                                $(".main-header").removeClass('main-header--active-searchbar');
                                $(".story-top_mobile").removeClass('story-top_mobile_active');
                            });
                            $search_block.on('blur', function () {
                                $(".main-header").removeClass('main-header--active-searchbar');
                                $(".search-form__clear-button_1").addClass('hidden');
                                $(".search-form__clear-button").addClass('hidden');
                                $(".mobile-search-result").addClass('hidden');
                                $(".story-top_mobile").removeClass('story-top_mobile_active');
                            });