看看div是否包含一个或多个输入的单词（Javascript） [英] See if div contains one or more entered words (Javascript)

问题描述

我想检查是否有任何div包含输入字段中输入的所有单词。然而，目前我陷入了一种情况，即一旦输入空格，它就会从头开始，因此类似OR运算符而不是AND运算符。任何人都可以把我推向正确的方向吗？

 
 
 
 < div class =search> aa ab ac ad< / div> 
< div class =search> ab ba bb bc< / div> 
< div class =search> bb cc dd ee< / div> 
 
< script> 
函数搜索（查询）{
 var divs = document.getElementsByTagName（'div'）; 
 var words = query.toLowerCase（）。split（）; （var h = 0，len = divs.length; h  for（var i = 0; i  
 ）{
 
 if（divs [h] .innerHTML.indexOf（words [i]）== -1）{
 divs [h] .style.backgroundColor ='#fff'; 
} 
 else {
 divs [h] .style.backgroundColor ='#ddd'; 
} 
 
} 
} 
 
} 
< / script> 
 
< input type =textonkeyup =search（this.value）;> 
  
 
 
 
 
 
 
显然我不是很清楚。我很抱歉。
 
 
我需要在Javascript中创建什么方向，以便查找div是否包含AND字[0]和字[1]以及AND字[2]等（所以，以任意顺序）？
 
 
 
现在当发生分割时，函数从头开始。
解决方案
试试我的代码：  
 $ b   HMTL： 
 < div class =search> 
< div> aa cC abcc ac ad< / div> 
< div> ab ba bb bcc< / div> 
< div> bb cc dd ee cc< / div> 
< / div> 
 
< span>搜寻：< / span>< input type =text> 
  
  CSS：  
 
 
  div {
 border：solid 1px＃1e2a29; 
 margin-bottom：10px; 
 padding：5px; 
 width：auto; 
} 
 
。匹配{
 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 ）{
 $（this）.data（'originalText'，$（this）.html（））; 
}）; 
 
 $（'input'）。keyup （函数（e）{
 var _val = $（this）.val（）; 
 var _span ='< span class =matched> $ 1< / span>'; 
 $（'。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）; 
} 
}）; 
} ）; 
}）
  
请参阅 DEMO  
 
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 over, and thus sort of acts like an OR operator instead of an AND operator. Could anyone please push me in the right direction? Thanks a lot!

This is what I have so far:
<div class="search">aa ab ac ad</div>
<div class="search">ab ba bb bc</div>
<div class="search">bb cc dd ee</div>

<script>
function search(query) {
var divs= document.getElementsByTagName('div');
var words = query.toLowerCase().split(" ");

 for (var h = 0, len = divs.length; h < len; ++h) {
  for (var i = 0; i < words.length; i++) {

   if (divs[h].innerHTML.indexOf(words[i]) == -1) {
    divs[h].style.backgroundColor = '#fff';
   }
   else {
    divs[h].style.backgroundColor = '#ddd';
   }

  }
 }

}
</script>

<input type="text" onkeyup="search(this.value);">




Apparently I was not very clear. My apologies.

What direction do I need to go to make it in Javascript so that it looks for if a div contains AND words[0] AND words[1] AND words[2], etc (so, in any random order)?

Right now when a split takes place, the function starts all over.
解决方案
Try my code :

HMTL :
<div class="search">
   <div>aa cC abcc ac ad</div>
   <div>ab ba bb bcc</div>
   <div>bb cc dd ee cc</div>
</div>

<span>Search: </span><input type="text">
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 = '<span class="matched" >$1</span>';
    $('.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

                        
这篇关于看看div是否包含一个或多个输入的单词（Javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！