See if div contains one or more entered words (Javascript)

Question

I would like to check if any div contains all words entered in an input field. However, currently I am stuck in a situation that as soon as a space is entered, it starts all ove

Answer 1

Try my code :

HMTL :

   
aa cC abcc ac ad
   
ab ba bb bcc
   
bb cc dd ee cc


Search: 

CSS :

div{ 
  border:solid 1px #1e2a29; 
  margin-bottom:10px;
  padding:5px;
  width:auto;
}

.matched{
  background-color:#f8dda9; 
  border:1px solid #edd19b;
  margin:-1px;
  border-radius:2px;
}

input[type="text"]{
  margin-left:10px;
}

Javascript :

   $(document).ready(function(){
$('.search > div ').each(function(i, el){
    $(this).data('originalText', $(this).html());
});

$('input').keyup(function(e){
     var _val = $(this).val();
     var _span = '$1';
    $('.search  div ').each(function(i, el){            
            var _originalVal = $(el).data('originalText');
            var re = new RegExp('('+_val+')', "ig");
            if(_val.length > 1 && re.test(_originalVal) >=0  ){                    
                $(el).html(_originalVal.replace(re, _span));                    
             }else{
                $(el).html(_originalVal);
            }   
    });
 });
})

See DEMO