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

    Combining Checkboxes & Text Search Script

    I had the idea to make a live search for a list of blog posts, but now I have trouble combining the later 2 of 3 scripts.

    So far everything is working, but I would like to combine the categories (checkboxes) with the text search, so that when you look for any text combination, the found spans do not get hightlighted, but keep display='' while the ones that do not include it disappear (diplay='none'). But obviously I cannot just change the parts including '.backgroundColor' to '.display'.

    The idea is that a span contains the categories and keywords and all spans with the correct words and combinations are found like that. Categories are case-sensitive, keywords are lower-case. So let's say the blog post is about webdesign and has Javascript and jQuery as keywords, the span would include "Webdesign javascript jquery". The checkbox would be set to Webdesign, and the keywords could be typed in any way possible, as is already working.

    If no keywords and categories are selected, the full list should show. Keywords narrow down the results, categories add up to one another. But that part works as expected already. The only thing is that I cannot figure out how to combine the two parts to get display='none' and display='' to work as expected.

    Thanks a lot for any help! Much appreciated!

    The full page: JS Bin
    Code:
    <!DOCTYPE>
    <html>
    <head>
    
    <script type="text/javascript">
    
    function checkall(n,box) {
     var boxes = document.getElementsByTagName('div')[n].getElementsByTagName('input');
     
     for (var i = 0; i < boxes.length; i++) {
      if (box.checked == true) {
       boxes[i].checked = true;
      }
      else {
       boxes[i].checked = false;
      }  
     }
    
    search();
    }
    
    function search() {
     var boxesvalue = [];
     var boxes = document.getElementsByTagName('input');
     var spans = document.getElementsByTagName('span');
     var query = document.getElementById('search').value.toLowerCase();
     var words = query.split(/\s+/g);
     
     for(var i=0; i<boxes.length; i++) {
      if(boxes[i].type == 'checkbox' && boxes[i].checked == true) {
       boxesvalue.push(boxes[i].value);
    
       for (var h = 0, len = spans.length; h < len; ++h) {
        spans[h].style.display = 'none';
        var count = 0;
     
        for (var i = 0; i < boxesvalue.length; i++) {
         if (spans[h].innerHTML.indexOf(boxesvalue[i]) > -1) {
          count ++
         }
    
         if (count >= 1) {
          spans[h].style.display = '';
         }
        }
       }
      }  
     }
     
     if(boxesvalue <= 1) {
      for (var h = 0, len = spans.length; h < len; ++h) {
       spans[h].style.display = '';
      }
     }
    
     for (var h = 0, len = spans.length; h < len; ++h) {
      spans[h].style.backgroundColor = '#000';
      var count = 0;
     
      for (var i = 0; i < words.length; i++) {
       if (spans[h].innerHTML.indexOf(words[i]) > -1) {
        count ++
       }
    
       if (count == words.length) {
        spans[h].style.backgroundColor = '#ddd';
       }
      }
     }
    }
    
    </script>
    
    </head>
    <body>
    
    <span class="search">AA aa ab ac ad</span>
    <span class="search">BB ab ba bb bc</span>
    <span class="search">bb cc dd ee</span>
    
    <br><br>
    
    <input type="text" onkeyup="search();" id="search"><br>
    <input type="checkbox" onclick="checkall(0,this);">Categories
     <div>
     <input type="checkbox" name="category" value="AA" onclick="search();">AA
     <input type="checkbox" name="category" value="BB" onclick="search();">BB
     <input type="checkbox" name="category" value="EE" onclick="search();">EE
    </div>
    
    </body>
    </html>

    Part 1 of 2 to combine:
    Code:
     var boxesvalue = [];
     var boxes = document.getElementsByTagName('input');
     var spans = document.getElementsByTagName('span');
     
     for(var i=0; i<boxes.length; i++) {
      if(boxes[i].type == 'checkbox' && boxes[i].checked == true) {
       boxesvalue.push(boxes[i].value);
    
       for (var h = 0, len = spans.length; h < len; ++h) {
        spans[h].style.display = 'none';
        var count = 0;
     
        for (var i = 0; i < boxesvalue.length; i++) {
         if (spans[h].innerHTML.indexOf(boxesvalue[i]) > -1) {
          count ++
         }
    
         if (count >= 1) {
          spans[h].style.display = '';
         }
        }
       }
      }  
     }
     
     if(boxesvalue <= 1) {
      for (var h = 0, len = spans.length; h < len; ++h) {
       spans[h].style.display = '';
      }
     }

    Part 2 of 2 to combine:
    Code:
     var query = document.getElementById('search').value.toLowerCase();
     var words = query.split(/\s+/g);
    
     for (var h = 0, len = spans.length; h < len; ++h) {
      spans[h].style.backgroundColor = '#000';
      var count = 0;
     
      for (var i = 0; i < words.length; i++) {
       if (spans[h].innerHTML.indexOf(words[i]) > -1) {
        count ++
       }
    
       if (count == words.length) {
        spans[h].style.backgroundColor = '#ddd';
       }
      }
     }
    Last edited by snakehill; 02-14-2013 at 03:19 PM.

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    For now, I have decided to wrap the spans in divs and use parentNode for the second half of the function. It does the job but it also means that in case the spans are already part of a div (which they will be, a div with included span per blog post), there is need of a second div wrapping which obviously makes it look very inconvenient, as in the following (per blog post):
    Code:
    <div><div><span></span></div></div>
    So although it works, any help on mixing it together or coding it appropriately would still be very appreciated. Thanks!


  •  

    Posting Permissions

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