I have few div elements with different text content and one input tag.

<input id="search" type="text"/>

<div class="list>
  <div id="el"> red </div>
  <div id="el"> blue </div>
  <div id="el"> red green </div>
</div>

I'd like to get something like this: if div's textContent is equal to input.value this div is displayed. Else, it's hidden.

Example:

input.value = "red"
/* "red" and "red green" are displayed, "blue" is hidden */

My JS code:

var search = document.getElementById("search");
var el = document.getElementById("el");

search.addEventListener("keyup", function(){
  if(search.value == el.textContent){
    el.style.display = "block"}
  else{
    el.style.display = "none"}})
    

<input id="search" type="text"/>

<div class="list">
  <div id="el"> red </div>
  <div id="el"> blue </div>
  <div id="el"> red green </div>
  
 </div>

I have few div elements with different text content and one input tag.

<input id="search" type="text"/>

<div class="list>
  <div id="el"> red </div>
  <div id="el"> blue </div>
  <div id="el"> red green </div>
</div>

I'd like to get something like this: if div's textContent is equal to input.value this div is displayed. Else, it's hidden.

Example:

input.value = "red"
/* "red" and "red green" are displayed, "blue" is hidden */

My JS code:

var search = document.getElementById("search");
var el = document.getElementById("el");

search.addEventListener("keyup", function(){
  if(search.value == el.textContent){
    el.style.display = "block"}
  else{
    el.style.display = "none"}})
    

<input id="search" type="text"/>

<div class="list">
  <div id="el"> red </div>
  <div id="el"> blue </div>
  <div id="el"> red green </div>
  
 </div>

• javascript
• html
• css

Share Improve this question Follow asked Apr 27, 2016 at 18:25 MartinMartin 14333 gold badges66 silver badges1313 bronze badges 1

• IDs must be unique – j08691 Commented Apr 27, 2016 at 18:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You don't want to assign the same id to multiple items. Instead use class.

See below for a working solution:

var search = document.getElementById("search");
var els = document.querySelectorAll(".el");

search.addEventListener("keyup", function() {

  Array.prototype.forEach.call(els, function(el) {
    if (el.textContent.trim().indexOf(search.value) > -1)
      el.style.display = 'block';
    else el.style.display = 'none';
  });

});

<input id="search" type="text" />

<div class="list">
  <div class="el">red</div>
  <div class="el">blue</div>
  <div class="el">red green</div>

</div>

Here's the solution for regardless of where the input is located, as long as it is space delimited (just in case):

var search = document.getElementById("search");
var els = document.querySelectorAll(".el");

search.addEventListener("keyup", function() {
  Array.prototype.forEach.call(els, function(el) {
    var values = search.value.split(' ');
    var display = true;
    for (var i = 0; i < values.length; i++) {
      if(el.textContent.trim().indexOf(values[i]) === -1)
        display = false;
    }
    
    el.style.display = display ? 'block' : 'none';
  });
});

<input id="search" type="text" />

<div class="list">
  <div class="el">red</div>
  <div class="el">blue</div>
  <div class="el">red green</div>

</div>