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 = i.name;
    container.append(element);
  });
}

/**
* 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 = e.target.value;
  // If no value, reset the list to all items
  if (!searchTerm) {
    makeList(items);
    return;
  }
  // Filter your list of data
  // based off the searchTerm
  const data = items.filter(i => i.name.toLowerCase().includes(searchTerm.toLowerCase()));
  // Pass the list filtered list of data to your makeList function
  // to generate your html
  makeList(data);
});

// Generate your initial list
makeList(items);
<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>${e.name}</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 (item.name.toUpperCase().includes(e.target.value.toUpperCase())) return item; 
  });

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

https://jsfiddle.net/ha49g0eo/4/

Problem :

Here is my code:

HTML

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

JAVASCRIPT

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 } 
    ] 

items.filter(name(function)){

});

Here is an ex. of what I want to do: https://www.w3schools.com/howto/howto_js_filter_lists.asp
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.

Note
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.

Comments

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

i

By