搜索javascript时的逻辑问题

Question

I have a text box to search for keywords that is present in divs. I am expecting a (and) kind of working while searching & the end result is I get the parent class names.

For instance:

input : google,facebook

output : p1

Issue : When i have 2 same keywords occurring in the same div then the whole logic fails.

Here is the code :

<input type="text" id="k_search">
<div class="p1">
    <div class="keyword">google is a search engne</div>
    <div class="keyword">facebook is sm site</div>
    <div class="keyword">orkut is no more</div>
</div>
<div class="p2">
    <div class="keyword">google is a gaint</div>           
    <!-- everything works fine until i have 2 keywords appearing inside 
       same parent div like this           
    <div class="keyword">google has gmail</div>
        // -->
</div>

Here is the javascript that i came up with :

<script>
    jQuery(document).ready(function($) {
        $('#k_search').keyup(function() {    
            var sel = [];       
            var sel_text = $(this).val();
            var search_arry = sel_text.split(',');      
            var newArray = search_arry.filter(function(v){return v!==''});      
            for(var i = 0;i<newArray.length;i++){           
                $(".keyword").each(function() {             
                    var cmp = $(this).text().toLowerCase();
                    var s_written = newArray[i].toLowerCase()
                    if(cmp.indexOf(s_written) > -1)
                    {
                        var temp  = $(this).parent().prop('className');
                        sel.push(temp);                 
                    }
                });
            }
            counts = {};
            new_sel = [];
            if(sel.length>1){
                /* Counting occurence of class names*/
                jQuery.each(sel, function(key,value) {
                    if (!counts.hasOwnProperty(value)) {
                        counts[value] = 1;
                    } else {
                        counts[value]++;
                    }
                });

                jQuery.each(counts, function(key,value) {
                    if(value == newArray.length)
                    {
                        new_sel.push(key);
                    }
                });
                process(new_sel);
            } else {
                process(sel);
            }
        });
    });
</script>

Here is the fiddle : https://jsfiddle.net/3q3ajusL/7/

Can you help please?

Answer 1

Based on your requirements, this should find what you were looking for. It was getting hard to understand the code, so I did it slightly differently.

jQuery(document).ready(function($) {
    $('#k_search').keyup(function() {
        var keywords = $(this).val().toLowerCase().split(',').filter(v => !!v);

        var $divs = $('div:has(>.keyword)').filter((index, div) => {
            var text = $(div).find('.keyword')
                .map((index, keyword) => $(keyword).text().toLowerCase())
                .toArray().join('
');

            for (const keyword of keywords) {
                if (!~text.indexOf(keyword)) {
                    return false;
                }
            }

            return true;
        });

        $("#result").text($divs.map((index, div) => $(div).prop('className')).toArray());
    });
});