Поиск формы html в массиве объектов
Мне нужно иметь возможность искать в массиве объектов. У меня есть HTML-код для:
<form action = "#" id = "filters">
<label for = "search">Search</label>
<input type = "search" name = "search" id = "search"/>
</form>
<div id = "searchresult"></div>
Понятия не имею, с чего начать, может кто-нибудь мне помочь? Заранее спасибо!
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
876
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Попробуйте использовать array.filter (функция (currentValue, index, arr), thisValue)
Не раскрывая полный код и не говоря, вот и вы, я попытаюсь сориентировать вас, чтобы вместо этого вы могли придумать собственное решение. выполните примерно следующие шаги:
- слушать поисковый ввод = Когда вы вводите на клавиатуре, вы хотите обновить результаты поиска. Вы можете слушать onkeypress, onkeydown или просто изменение ввода другие события внутри ввода
- когда клавиша нажата, вам нужно проверить новое значение внутри input = Вы можете сделать это с помощью проверка его свойства значения.
- наконец, вы хотите получить только объекты из списка, соответствующие значение поиска = есть гладкие JS-функции для отфильтровать элементы в множество, или вы можете сделать это в стандартном цикле for
Надеюсь, это даст вам представление о том, что делать. Это может быть источник вдохновения для вас
Есть несколько способов добиться того, что вы пытаетесь сделать.
Одним из способов было бы присоединить событие input к полю ввода, чтобы при изменении значения поля ввода вы могли получить значение поля ввода, а затем использовать метод фильтр для фильтрации массива meals на основе значения поля ввода. . Наконец, вы можете отобразить отфильтрованные результаты в searchresult div.
const meals = [
{
id: 1,
title: 'Strawberry Salad with Poppy Seed Dressing',
img: 'Strawberry-Salad-with-Poppy-Seed-Dressing.jpg',
book: 1
},
{
id: 2,
title: 'Cashew Turkey Salad Sandwiches',
img: 'turkey-sandwich.jpg',
book: 2
}
];
const searchField = document.querySelector('#search');
const searchResultsContainer = document.querySelector('#searchresult');
searchField.addEventListener('input', (e) => {
// if input field is empty, clear the search results
if (e.target.value === '') {
searchResultsContainer.innerHTML = '';
return;
}
// filter the meals array
const searchResults = meals.filter(meal => {
return meal.title.toLowerCase().includes(e.target.value.toLowerCase());
});
// before displaying the search results, clear the search results div
searchResultsContainer.innerHTML = '';
// display the titles of the meal objects that include the text entered in input field
searchResults.forEach((element, index) => {
const p = document.createElement('p');
p.textContent = (index + 1) + '. ' + element.title;
searchResultsContainer.appendChild(p);
});
});<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
</head>
<body>
<form action = "#" id = "filters">
<label for = "search">Search</label>
<input type = "search" name = "search" id = "search"/>
</form>
<div id = "searchresult"></div>
</body>
</html>Другие вопросы по теме
Полоса прокрутки внутри ячейки таблицы с Norwap не работает
Свойство CSS border-bottom не действует
Как заставить HTML-файл открываться в браузере вместо загрузки? (Классические Сайты Google)
Ошибка источника javascript img при проверке html
Как коснуться внутренней границы div с нижней стороной внешнего div?
Встроенный ввод CSS
Могу ли я создавать страницы PHP с помощью '? P = pagename'?
Как сделать так, чтобы в одном раскрывающемся списке всегда было значение ""
Как добавить столбец данных с помощью insertCell ()?
Возможность скрыть скрипт внутри изображения Base64
Похожие вопросы
Является ли хранилище Vue.js экземпляром в sessionStorage приемлемой парадигмой?
Почему мой объект в консоли формулируется иначе, чем когда я запускаю его через Tidy JS?
Как извлечь предложения в регулярном выражении, разделенные словом, за которым следует точка с запятой?
Найти данные из последней строки
ScriptManager в Aspx
РЕАКТИРОВАТЬ: Использовать setState в функции, вызываемой из другого компонента?
Как добавить пользовательские окна с расширенными возможностями JavaScript для приложения ToDo? (+ Пояснение к видео)
Вы можете выполнять только равные сравнения для NaN
Как получить родительский идентификатор в неограниченном вложенном массиве в JavaScript
Ошибка источника javascript img при проверке html