Filtering array objects based on input value / javascript

Question

I am trying to filter my objects from an array list based on the user input, but I am not sure how to achieve this.

That's my html:

  <input id="search" type="text" placeholder="Search..">
    <div id="animallist"></div>

javascript:

const animals = [{
    name: "Cat",
    useful: "no"
  },
  {
    name: "Dog",
    useful: "yes"
  },
  {
    name: "Fish",
    useful: "no"
  }
  ]

animals.forEach(addLink);

function addLink(animal, i) {
  const div = document.createElement('div');
  const animalList = document.createElement('h2');
  animalList.innerHTML =  animal.name + " " +"-"+"useful?" + " "+ animal.useful;
  animalList.style.cssText = "text-align:center;"
  div.appendChild(animalList);
  animallist.appendChild(div);

}

I dont know if that's possible, but I wanted to do it that way, so it would filter the items in real time, so If I would enter letter C in my search box, then it would eliminate 2 other items in the array list and showed only Cat.

jsfiddle

Aplet123 · Accepted Answer · 2020-03-28 16:58:33Z

2

You can edit your addLink to have div.dataset.animalName = animal.name;, and add the following code:

search.addEventListener("keyup", function() {
    Array.from(animallist.children).forEach(d => {
    if (d.dataset.animalName.toLowerCase().indexOf(this.value.toLowerCase()) != -1) {
        d.style.display = "block";
    } else {
        d.style.display = "none";
    }
  });
});

Refer to this fiddle.

answered Mar 28, 2020 at 16:58

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Menor Over a year ago

Do you know what if statement would I have to have to filter the objects based on the number? Lets say that I wanna enter the number and display all items that are equal or better than the value entered?

Aplet123 Over a year ago

What number? Can you please be more specific?

Menor Over a year ago

Lets say that I got another field in my array list that contains a number value, for example price, What if statement would I need to be able to filter the items in the list based on the price. The value that I would put in the search input, would display all items with the same value or with higer one (>=).

Aplet123 Over a year ago

Then you can edit addLink and add div.dataset.price = animal.price and then edit the filter to parseInt(d.dataset.price, 10) >= parseInt(this.value, 10).

Aplet123 Over a year ago

You can change the line to this.value.length == 0 || parseInt(d.dataset.animalPrice, 10) >= parseInt(this.value, 10)

|

Aziz.G · Accepted Answer · 2020-03-29 15:03:37Z

2

you can also do something like this:

const animals = [{
    name: "Cat",
    useful: "no"
  },
  {
    name: "Dog",
    useful: "yes"
  },
  {
    name: "Fish",
    useful: "no"
  }
];

const select = document.querySelector("#search");
const AnimalList = document.querySelector("#animallist");


select.onkeyup = function search() {
  const {
    value
  } = select;
  if (value) {
    animals.filter(({
      name
    }) => {

      if (name.toUpperCase().indexOf(value.toUpperCase()) > -1) {
        AnimalList.innerHTML = name
      }
    })
  } else {
    AnimalList.innerHTML = "try again...";
  }

}

#animallist {
  margin-top: 10px;
  padding: 10px;
  background: #8e44ad;
  color: #fff;
}

<input id="search" type="text" placeholder="Search..">
<div id="animallist">search for an animal...</div>

edited Mar 29, 2020 at 15:03

answered Mar 28, 2020 at 17:14

Aziz.G

3,7813 gold badges20 silver badges38 bronze badges

1 Comment

Peter Seliger Over a year ago

The approach does not fulfill the OPs requirement "... so If I would enter letter C in my search box, then it would eliminate 2 other items in the array list and showed only Cat."

Collectives™ on Stack Overflow

Filtering array objects based on input value / javascript

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related