Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

HTML , JavaScript , как сделать что бы поиск работал без кнопки?

Дмитрий Макаренко Мастер (2246), на голосовании 5 месяцев назад
Как сделать , что бы не приходилось каждый раз нажимать на кнопку , а просто вводить буквы и он сразу искал?
  




Search Images







Image 1

Image 1




Image 2

Image 2




Image 3

Image 3







Дополнен 6 месяцев назад
 function searchImages() {
const searchInput = document.getElementById('searchInput').value.toLowerCase();
const imageContainers = document.querySelectorAll('.imageContainer');

for (let container of imageContainers) {
const imageName = container.querySelector('p').textContent.toLowerCase();

if (imageName.includes(searchInput)) {
container.style.display = 'block';
} else {
container.style.display = 'none';
}
}

const foundImage = document.querySelector('.imageContainer[style="block"] img');
if (foundImage) {
foundImage.style.position = 'absolute';
foundImage.style.top = '0';
foundImage.style.left = '0';

for (let container of imageContainers) {
if (container !== foundImage.parentElement) {
container.style.display = 'none';
}
}
}
}
Голосование за лучший ответ
Национальный Социалист Мастер (1440) 6 месяцев назад
Добавь функцию автозаполнения.
Дмитрий МакаренкоМастер (2246) 6 месяцев назад
не могли бы вы пожалуйста показать как именно это сделать?
Национальный Социалист Мастер (1440) Дмитрий Макаренко, Используй библиотеку jQuery UI Autocomplete
Национальный СоциалистМастер (1440) 6 месяцев назад
Пришлось удалить твои строчки кода с ссылками, антиспам система мешает
Дмитрий Макаренко Мастер (2246) Национальный Социалист, мне бы без использования библиотек , я дополнил свой вопрос своим JS кодом (прошу прощения что изначально его не было , я забыл его вставить) , вы очень умный , может вы сможете мне сказать как изменить мой код? человек ниже говорит что нужно addeventlistener на input , но я не понимаю как
Никита Сосиска Ученик (199) 6 месяцев назад
Дмитрий МакаренкоМастер (2246) 6 месяцев назад
прошу прощения , я забыл предоставить js код , теперь он есть , не моли бы вы мне показать куда именно это нужно вставить?
Петр Алексеевич Оракул (82078) 6 месяцев назад
убрать у кнопки вызов функции, добавить обработчик инпуту
     
oninput будет вызывать функцию с каждым введенным символом
onchange будет вызывать только когда фокус поля ввода пропадает (поставить фокус в другое поле или кликнуть в пустом месте)
Оракул (50099) 6 месяцев назад
 привет 
ты разбираешься в js скриптах?

в html5 видеоплеере

как можно там сделать
окошко
или
информацию

когда удерживаешь
экран видеоплера
то
появляется то окно

могу скинуть сам плеер
там и js файл
Похожие вопросы