Resolved Searching for all words entered

snakehill · 02-12-2013, 08:15 AM

I would like to check if any div on the page 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 || operator instead of an && operator.

This is what I have so far:

Code:

<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++) {
   
   divs[h].style.backgroundColor = '#ddd';
   
   if (divs[h].innerHTML.indexOf(words[i]) == -1) {
    divs[h].style.backgroundColor = '#fff';
   }

   
  }
 }

}
</script>

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

So if I would look for "bb ab" it should look if any div contains 'bb && ab' and then only keep the second of the divs highlighted.

Could anyone please give me a push in the right direction? Thanks a lot!

Philip M · 02-12-2013, 10:23 AM

I think this will do the trick:-

Code:

<script type = "text/javascript">

function search(query) {
var divs= document.getElementsByTagName('div');
query = query.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
var words = query.toLowerCase().split(" ");

Quizmaster: What Shakespeare play has the coldest season of the year in its title?
Contestant: A Midsummer Night's Dream

snakehill · 02-12-2013, 10:29 AM

Thank you. It seems to be heading towards the solution a bit. However, when I now enter 'cc b' it highlights all of them again instead of just the 3rd one. When entering 'cc bb' it also highlights the 2nd one while it does not contain 'cc'.

Philip M · 02-12-2013, 10:41 AM

Try

Code:

var words = query.toLowerCase().split(" ");
words.sort();

You may need to use jQuery.

snakehill · 02-12-2013, 11:43 AM

I suppose you are right. Thanks though.

One last question regarding the topic:

Is there any way to code the below nicer (and preferably with unlimited array lengths). I know this particular approach is terrible but it shows exactly what I wish the code to do.. and it does work.

Code:

<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(/\s+/g);

 for (var h = 0, len = divs.length; h < len; ++h) {
 	
   divs[h].style.backgroundColor = '#ddd';

   if (words[3]) {
   	if (divs[h].innerHTML.indexOf(words[0]) == -1 || divs[h].innerHTML.indexOf(words[1]) == -1 || divs[h].innerHTML.indexOf(words[2]) == -1 || divs[h].innerHTML.indexOf(words[3]) == -1) {
    divs[h].style.backgroundColor = '#fff';
    }
   }  
   if (words[2]) {
   	if (divs[h].innerHTML.indexOf(words[0]) == -1 || divs[h].innerHTML.indexOf(words[1]) == -1 || divs[h].innerHTML.indexOf(words[2]) == -1) {
    divs[h].style.backgroundColor = '#fff';
    }
   }
   else if (words[1]) {
   	if (divs[h].innerHTML.indexOf(words[0]) == -1 || divs[h].innerHTML.indexOf(words[1]) == -1) {
    divs[h].style.backgroundColor = '#fff';
    }
   }
   else if (words[0]) {
   	if (divs[h].innerHTML.indexOf(words[0]) == -1) {
    divs[h].style.backgroundColor = '#fff';
    }
   }
      
 }

}
</script>

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

Philip M · 02-12-2013, 12:21 PM

Try this:-

Code:

<html>
<head>
</head>

<body>

<div class="search">aa ab ac xx ad</div>
<div class="search">ab ba bb bc</div>
<div class="search">xx bb cc dd ee</div>

<script type = "text/javascript">

function search(query) {
var divs= document.getElementsByTagName('div');
query = query.replace(/^\s+|\s+$/g,"");  
query = query.replace(/\s{2,}/g," ");  // Replace multiple spaces with one space
var words = query.toLowerCase().split(" ");
var wlen = words.length;

for (var h = 0, len = divs.length; h < len; ++h) {
divs[h].style.backgroundColor = '#fff';
var count = 0; 

for (var i = 0; i < words.length; i++) {
if (divs[h].innerHTML.indexOf(words[i]) > -1) {
count ++
}

if (count == wlen) {  // the same number as the number of words sought has been found in the div
divs[h].style.backgroundColor = '#ddd';
}
   
}
}

}

</script>

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

I have not fully tested it, but it seems to work.
You need to be aware that the script finds divs containing all the search terms entered, so no div contains bb cc dd zz

snakehill · 02-12-2013, 12:37 PM

That, Sir, is perfect! I was about to ask how the "count == wlen" could possibly end up doing the job but I figured it out.

Thank you so much!!

Philip M · 02-12-2013, 12:39 PM

Glad to have been able to help solve your problem.