Html Поиск с топ-5 до поиска - PullRequest
Новая
       18

Html Поиск с топ-5 до поиска

0 голосов
/ 26 апреля 2020

У меня проблема на моем сайте. Я надеюсь, что у кого-то есть идея, как это исправить.

Я хочу создать встроенную панель поиска для моего веб-сайта, которая ищет в Google поисковое слово, но добавляет топ-5 перед ним, например: top 5 [поисковое слово ]. (Если пользователь наберет бананы, например, веб-сайт откроет новое окно с поиском Google для: 5 лучших бананов)

Я попытался выяснить, как я мог сделать это возможным, но я понятия не имею, как чтобы сделать это.

Я пытался построить html форму: 

            <form action="https://www.google.com/search" method="GET">
                <input type"text" name="q" placeholder="Search">
                <input type="submit" value="Search">
                </form>

Но я не могу поместить действие get form в https://www.google.de/search?&q=top+5

Надеюсь, вы поможете мне с моим вопросом.

1 Ответ

0 голосов
/ 26 апреля 2020

@ Terox В вашем случае вам нужно динамически обновить пользовательское значение, и просто с помощью HTMl это невозможно. Вам нужно использовать javascript, и перед тем, как пользователь нажмет кнопку «отправить», вы должны получить пользовательский ввод и добавить перед ним «строку по умолчанию». Форма action не поможет вам в этом случае, вы можете использовать приведенный ниже код для этого конкретного случая использования 

<script type="application/javascript">
    // get elements of the form
    const form = document.querySelector("#searchForm");
    const inputBox = document.querySelector("#inputBox");

    // add a listener to update the value on form submit
    form.addEventListener("submit", event => {
        // prevents automatic submit of the form and lets you update the value
        event.preventDefault();

       // takes you to different url and append your custom string before
        window.location.href = 'https://www.google.com/search?q=top+5+' + inputBox.value;
    });
</script>

Подробнее об этом здесь

...