отображать значение поля ввода <input type = "search"> в форме после первого запроса (javascript)

Question

Я использую поле ввода HTML5 в форме получения для осуществления поиска на моем сайте:

<input type="search" name="q" placeholder="search" value="">

все работает, но после первого поиска введенная пользователем строка поиска не сохраняется в поиске.поле, скорее значение атрибута placeholder отображается снова.

после первого поиска я хотел бы, чтобы строка поиска, введенная пользователем, отображалась в поле поиска в форме.

, чтоозначает, что value атрибут поля ввода должен быть "" перед первым поиском (чтобы отобразилось значение атрибута placeholder), а затем динамически обновляться после первого поиска.

Я понял изMozilla documentation on <input type="search"> что введенное пользователем значение сохраняется в DOMstring "searchTerms = mySearch.value;", но мои навыки программирования и опыт ограничены.

Я не использую php, спасибо заранее.

Answer 1

решена проблема с:

• DOMContentLoaded для запуска JavaScript

(https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)

• URLSearchParams и URLSearchParams.get () для получения строки запроса

(https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

(https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get)

• getElementById для установки значения в поле ввода

(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)

это общий вопрос-

( Как получить значения строки запроса в JavaScript? )

<input type="search" name="q" placeholder="search" id=mySearch required value="">

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
    let params = new URLSearchParams(document.location.search.substring(1));
    let qstring = params.get("q"); // is the string for the query
    document.getElementById("mySearch").value = qstring;
});
</script>

Answer 2

Попробуйте добавить это event.preventDefault(); в вашу функцию, при этом ваше событие будет отменено, но его распространение не будет. Если вы хотите узнать больше об этом, вот документация: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault