Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Searching for all words entered

    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!
    Last edited by snakehill; 02-12-2013 at 12:45 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    snakehill (02-12-2013)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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'.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Try

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

    You may need to use jQuery.
    Last edited by Philip M; 02-12-2013 at 12:42 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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);">
    Last edited by snakehill; 02-12-2013 at 11:52 AM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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
    Last edited by Philip M; 02-12-2013 at 12:26 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    snakehill (02-12-2013)

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!!

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Glad to have been able to help solve your problem.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •