javascript - 查看 div 是否包含一个或多个输入的单词(Javascript)

Question

我想检查是否有任何 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>
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);">

<小时/>

看来我还不是很清楚。抱歉。

我需要朝什么方向去用Javascript制作它，以便它查找div是否包含ANDwords[0]ANDwords[1]ANDwords[2]等(因此，以任何随机顺序)？

现在，当 split 发生时，函数会重新开始。

Answer 1

还需要检查每个查询词的长度:

<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 (words[i].length > 0 && divs[h].innerHTML.indexOf(words[i]) >= 0) {
    divs[h].style.backgroundColor = '#ddd';
    break;
   }
   else {
    divs[h].style.backgroundColor = '#fff';
   }
  }
 }
}
</script>

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