0

I asked a question before but I need a bit more information. I found this great snippet for searching FAQ items:

http://jsfiddle.net/pT6dB/

I want to find a question containing "round and "Earth". However, if I type "round Earth" in looks specifically for "round Earth" which it cant find. I want it to be an "AND" query.

Would this be an easy modification?

pb2q
  • 58,613
  • 19
  • 146
  • 147
J.Zil
  • 2,397
  • 7
  • 44
  • 78

2 Answers2

2

you need to search for each term individually, and build up a query.

var term = $(this).val().trim();

var words = term.split(' ');

var selector = "#result LI";

for(var i = 0; i < words.length; i++){
    selector += ':contains(' + words[i] + ')'
}

$(selector).show();

Update: Here's a fiddle for you, with added case-insensitivity

http://jsfiddle.net/pT6dB/

Andrew Bullock
  • 36,616
  • 34
  • 155
  • 231
  • So, if I used your code and searched "Test Search" it would only should results which contained the word "Test" and "Search"? I can see that you are using trim and split functions and targetting the result LI but I am unsure about how I integrate it. Do I put this code below the .ready(function( { – J.Zil Jul 28 '12 at 19:50
  • @James Willson: you have to check for space in the search box; if there is space most likely a person is searching for 2 terms; so display results only if you find both. – Luca Filosofi Jul 28 '12 at 19:59
  • Got ya. So we split every time we see the space (ie line2). The code makes sense to me on a basic level, but im new to jquery, I cant understand how you would integrate it. Can someone show me or should I have a whack at it? – J.Zil Jul 28 '12 at 20:24
  • I dont know jquery and im new to coding, but I had a go: http://jsfiddle.net/pT6dB/45/ – J.Zil Jul 28 '12 at 20:27
0

Updated Fiddle to search case Insensitive.

http://jsfiddle.net/pT6dB/161/

$(document).ready(function() {
    $('LI STRONG').click(function(e) {
        e.preventDefault(); // disable text selection
        $(this).parent().find('EM').slideToggle();
        return false; // disable text selection
        
        

    });


jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};


jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

    $('#search').keyup(function(e) {
        var s = $(this).val().trim();
        
        if (s === '') {
            $('#result LI').show();
            return true;
        }
        $('#result LI:not(:contains(' + s + '))').hide();
     
        $('#result LI:contains(' + s + ')').show();
        return true;
    });

}); // end document ready
#faq EM {
display:none;
}

#faq LI STRONG {
font-weight:normal;
color:#246;
text-decoration:underline;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faq">
    <p><label>Search</label><br />
<input id="search" value="" size="30" /></p>
<p>&nbsp;</p>
<ul id="result">
  <li><strong>How round is the Earth?</strong><br /><br /><em>
  Very round.
  <br /><br /></em></li>
  <li><strong>How rectangular is paper?</strong><br /><br /><em>
  Very rectangular.
  <br /><br /></em></li>
</ul>
</div><!-- #faq -->
Rakhi
  • 929
  • 15
  • 41