Solution 1 :

In your filter function, you could just generate all your html there, but I would prefer to keep them seperate. It looks to me like you have 3 different pieces:

  • Your data
  • A filter function to filter the data based off the search term
  • An HTML generator function that will generate your html based off your data

Here’s a quick way of bringing it all together

const items = [{
    name: 'toy1',
    price: '12.00',
    quantity: 12

    name: 'toy2',
    price: '1.00',
    quantity: 5
    name: 'toy3',
    price: '11.00',
    quantity: 2
    name: 'toy4',
    price: '1.00',
    quantity: 2

* Create a function to generate your elements based
* off the passed in array of data
function makeList(data) {
  // Grab your container
  const container = document.getElementById('items');
  // Clear it (reset it)
  container.innerHTML = '';
  // Iterate through your data and create the elements
  // and append them to the container
  data.forEach(i => {
    const element = document.createElement('div');
    element.innerText =;

* Create an event listener to react to
* search updates so you can filter the list.
* keyUp is used so that you wait for the
* user to actually finish typing that specific
* char before running. Otherwise, you'll be missing
* a char. (Try changing it to 'keypress' and see what happens)
document.getElementById('search').addEventListener('keyup', function(e) {
  // Get the textbox value
  const searchTerm =;
  // If no value, reset the list to all items
  if (!searchTerm) {
  // Filter your list of data
  // based off the searchTerm
  const data = items.filter(i =>;
  // Pass the list filtered list of data to your makeList function
  // to generate your html

// Generate your initial list
<input type="text" id="search">
<div id="items"></div>

Alternatively, you could just hide the elements in the DOM instead of regenerating a fresh html list each time.

Solution 2 :

You can do something like this

const persons = [
  {name: 'John Doe'},
  {name: 'Jane Doe'},
  {name: 'Spongebob'},
  {name: 'Patrick Star'}

const l = document.querySelector('#list');
const i = document.querySelector('#search');

const displayList = (arr) => {
  arr.forEach(e => {
    l.insertAdjacentHTML('beforeend', `<li>${}</li>`);

displayList(persons); // Initialize the list using persons array

i.addEventListener('input', (e) => {
  l.innerHTML = ''; // Clear the list

  // Search for possible match and return it as array
  const searchResult = persons.filter(item => {
    if ( return item; 

  displayList(searchResult); // Display a new list based on searched string

Problem :

Here is my code:


  <input type="text" id=“search”>
  <div id = “items”></div>


var items = 
    [ { name: 'toy1', price: '12.00', quantity: 12 } 
    , { name: 'toy2', price:  '1.00', quantity:  5 } 
    , { name: 'toy3', price: '11.00', quantity:  2 } 
    , { name: 'toy4', price:  '1.00', quantity:  2 } 



Here is an ex. of what I want to do:
For my case I want the user to be able to search by the name but I am stuck on what to write inside the function.
I want each of the objects in div’s so when the user searches by name,
ex:toy4, then the other divs filter out and only the div containing the information for toy4 is displayed.
I know filter is the correct method to use here but I’m not sure how to link the users input from the input box and “check/filter” the divs out to only display what the user is searching for and put each object in divs.

*I can only use javascript.

I have read most questions posted similar to mine but they were in languages which I have not learned yet or were not able to answer my question.


Comment posted by mwilson


Comment posted by mwilson

@rythm500 I updated the arrow function to be a regular function so it’s more clear for you

Comment posted by mwilson