1

入力フィールドに入力されたすべての単語が div に含まれているかどうかを確認したいと思います。ただし、現在、スペースが入力されるとすぐに最初からやり直し、AND 演算子ではなく OR 演算子のように動作するという状況に陥っています。誰かが私を正しい方向に押してくれませんか? どうもありがとう！

これは私がこれまでに持っているものです:

<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);">

どうやら私はあまり明確ではありませんでした。謝罪いたします。

div に AND 単語 [0] AND 単語 [1] AND 単語 [2] などが含まれているかどうかを検索するように Javascript で作成するには、どの方向に進む必要がありますか (つまり、ランダムな順序で)?

現在、分割が行われると、関数は最初からやり直されます。

4

2 に答える 2

0

私のコードを試してください：

HTML :

<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);
            }   
    });
 });
})

デモを見る

于 2013-02-12T01:57:40.387 に答える
0

各クエリ ワードの長さも確認する必要があります。

<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);">
于 2013-02-12T00:58:30.963 に答える