При переходе на другую страницу задать класс заполненному полю input?

Question

[Dunno2018]

Здравствуйте.
Задаю класс input'у при заполнении:

$('.search__input').on('input', function() {
	if(this.value) {
		$(this).addClass('filled')
	} else {
		$(this).removeClass('filled')
	}
})

При отправке формы происходит переход на другую страницу, поле остается заполненным, но при этом заданный класс удаляется. А нужно, чтобы класс при переходе на другую страницу снова добавлялся.

Comments

[Сергей Соколов]

почему поле остаётся заполненным?

[Dunno2018]

Сергей Соколов, это форма поиска, вызываемая стандартной функцией wordpress'а
Код формы:

<form role="search" method="get" class="search" action="domen.ru/">
	<input type="text" value="Найти что-то" name="s" class="search__input filled" placeholder="Просто напишите, что ищете">
	<svg width="18" height="18" class="search__icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M7.725 1.5C4.275 1.5 1.5 4.2 1.5 7.575C1.5 10.95 4.275 13.65 7.725 13.65C9 13.65 10.275 13.275 11.325 12.525L11.4 12.45L15.225 16.275C15.525 16.575 15.975 16.575 16.275 16.275C16.425 16.125 16.5 15.975 16.5 15.75C16.5 15.525 16.425 15.375 16.275 15.225L12.45 11.4L12.525 11.325C13.5 10.275 14.025 8.85 14.025 7.425C14.025 4.2 11.175 1.5 7.725 1.5ZM7.725 12.15C5.1 12.15 3 10.125 3 7.575C3 5.025 5.175 2.925 7.8 2.925C10.425 2.925 12.6 5.025 12.6 7.575C12.6 10.125 10.425 12.15 7.725 12.15Z"></path>
	</svg>
</form>

Переход на страницу:
domen.ru/?s=Найти+что-то

[Сергей Соколов]

надо проверку, которая сейчас внутри слушателя события, запустить ещё и без события "input" – сразу.

[Dunno2018]

Сергей Соколов, спасибо большое. Получился такой код:

function searchInput() {
	const input = $('.search__input')
	if(input.val()) {
		input.addClass('filled')
	} else {
		input.removeClass('filled')
	}
}

searchInput()

$('.search__input').on('input', function() {
	searchInput()
})

Буду благодарен критике.

[Сергей Соколов]

Dunno2018, можно без лишней обёртки: $('.search__input').on('input', searchInput);

И если элемент не меняется, можно его найти лишь однажды:

const input = $('.search__input'); // один для всех

const searchInput = () => {
  if (input.val()) { 
  // ...
}

input.on('input', searchInput);

(чуть обновил коммент)