Поиск ввода на JAVASCRIPT

как сделать вход как на сайте google? Мне нужно чтобы после ввода текстов и во входе открывался гугл с нужным запросом.

на ЯВАСКРИПТЕ

вклад гугла
1

2

мой ввод (html) <input class = "finder" type = "search" placeholder = "Search in Google">

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
61
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

если вы имеете в виду перенаправление на страницу Google после ввода, это будет работать

document.querySelector('.finder').addEventListener('focusout',function(){
location.replace("https://www.google.com/search?q = " +     document.querySelector('.finder').textContent);
});

это отправит пользователя на страницу Google с необходимыми запросами, когда они покинут поле ввода.

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

или вы можете отправить выборку и получить информацию о фокусе

Я не понимаю, как работает focusout? Что я должен делать? Сбросить фокус, нажав на пустое место?

Ustllys 21.01.2023 18:09

если вы щелкнете вне ввода, это вызовет выделение фокуса, если вы хотите что-то на вводе, это сработает для вас w3schools.com/howto/howto_js_trigger_button_enter.asp

yuta y 22.01.2023 02:53
Ответ принят как подходящий

Вы можете добавить прослушиватель событий, скажем, к кнопке.
При нажатии этой кнопки значение в поле поиска будет добавлено в конец ссылки поиска Google.

Однако, поскольку вы можете ожидать, что люди будут вводить предложения (а URL-адреса не используют пробелы), вы можете использовать replace(), чтобы заменить все пробелы, в нашем случае, на + (формат URL для пробелов — %20, но пробелы в запросах обычно заменен символом +).

Наконец, вы можете использовать window.open(), чтобы открыть новое окно, в котором используется наша ссылка.

ОБНОВЛЕНИЕ: вы можете использовать нажатие клавиши в качестве триггера для прослушивателя событий, а затем проверить, является ли введенная клавиша «Вводом», поэтому вам не нужна кнопка.

Вот пример:

  • SEARCH_GOOGLE_VALUE — это текстовое поле, которое может ввести пользователь.

const SEARCH_GOOGLE_VALUE = document.getElementById('SEARCH_GOOGLE_VALUE');

SEARCH_GOOGLE_VALUE.addEventListener("keypress", (keyboard) => {
if (keyboard.key == "Enter") {
    let value = SEARCH_GOOGLE_VALUE.value;
    value = value.replace(' ', '+');
    
    let link = "https://www.google.com/search?q = " + value;
    window.open(link);
}
});

Мне нужно сделать это без кнопки. И нажав ENTER.

Ustllys 21.01.2023 18:05

Вы можете использовать «нажатие клавиши» вместо «щелчка», таким образом, каждый раз, когда вы вводите клавишу в поле ввода, функция будет вызываться, тогда вы можете просто установить оператор if для продолжения, только если введенная клавиша «Enter» ; Я изменю код.

Smile4Blitz 21.01.2023 19:52

Спасибо за изменение кода, но у меня проблема. ошибка "SEARCH_GOOGLE_VALUE имеет значение null". Я не понимаю, почему. Я добавил "id = "SEARCH_GOOGLE_VALUE" во входные данные. Или мне нужно добавить что-то еще?

Ustllys 22.01.2023 09:34

Это означает, что JS не может найти ваш элемент на странице. Убедитесь, что теги ID одинаковы как в HTML, так и в JS. Также может случиться так, что вы поместите свой JS перед вашими HTML-элементами, тогда JS не сможет найти элемент, поскольку он еще не существует, обязательно поместите свой JS под вашими HTML-элементами.

Smile4Blitz 22.01.2023 11:09

Другие вопросы по теме

Похожие вопросы

Мутирующий массив JavaScript split(" ") против оператора распространения
JavaScript — объединение объектов из выборки API
Лучшая альтернатива для <slot/> в <textarea> в компоненте [Vue.js 3]
Как убедиться, что первый вариант элемента радиогруппы выбран по умолчанию в этом приложении Angular Material?
Повторитель формы с опцией выбора не работает с ответом ajax
Всплывающее окно при наведении должно исчезать при прокрутке страницы — Material UI (MUI) v5 для React
У меня есть анимированная последовательность изображений, которая воспроизводится в цикле. Как подключить его к кнопке, которая переключается между воспроизведением и паузой?
Почему я не могу вызвать правильный div с помощью parentNode и nextSibling?
Crypto.subtle расшифровывает компактный jwe с ECDH-ES + A128KW - операция не удалась по причине, связанной с операцией
Операция Rxjs для нажатия нескольких кнопок и выполнения вызовов API