CODEWITHSUNDEEP
javascriptjquery
user2809321
user2809321

Reputation: 204

Javascript onpage search that search all keywords

I'm trying to create a onpage search that searches within a certain container of the page no matter order of the keywords of the search e.g. if I put in "This is an apple" the results should be anything that contains "This", "is", "an", "apple".

I didn't get any errors but nothing seems to be firing up

Javascript/jquery

<script type="text/javascript">
$( document ).ready(function() {
  $(".searchable").hide();


});
function searchFunction() {
    var result = $("input[name='searchHelp']").val();
    result = result.split(" ");
    $('.searchable').each(function(){
       var text = $(this).html().toString();
       text = text.split(" ");
       show = false;
       $.each(result,function(){
            if (text.indexOf($(this).val())) {
                show = true;
            }
       });
       if (show) {
            $(this).show();
       }
    });

}
</script>

Here's the HTML just in case 

<div class="search-help-bar" name = "searchBox">
    <input type="text" name="searchHelp" class="help">
    <input type="submit" class="search-btn" onclick = "searchFunction();">
</div>
    <ul id="resultsList">
        <li class = "searchable"><a href="/">This is result 1</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 2</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 3</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 4</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
        <li class = "searchable"><a href="/">This is result 5</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis orci vel finibus scelerisque. Aliquam erat volutpat. Ut ut felis ac magna ultricies ullamcorper et id tortor. Sed porta quis orci a iaculis.</p></li>
    </ul>

Upvotes: 0

Views: 46

Answers (2)

Hidran
Hidran

Reputation: 328

I made this change and it worked:

 $.each(result,function(ele,val){

        if (text.indexOf(val)!==-1) {
            show = true;

        }
   });

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382130

this, in your most inner loop, is a string, not an input (in fact it's an instance of String, which introduces another difficulty). And indexOf returns the index of the found element.

Change

$.each(result,function(){
        if (text.indexOf($(this).val())) {
            show = true;
        }
});

to

 $.each(result,function(_,v){
        if (text.indexOf(v)!==-1) {
            show = true;
        }
 });

Demonstration

Note that I also made a few other minor changes, like splitting on /[\s\.]/ rather than just on space.

Upvotes: 2

Related Questions