搜索javascript时出现逻辑问题

Question

我有一个文本框来搜索存在于 divs 中的关键字。我期待在搜索时进行（和）一种工作，最终结果是我得到了父类名称。

例如：

input : google,facebook

output : p1

问题：当我在同一个 div 中出现 2 个相同的关键字时，整个逻辑就会失败。

代码如下：

<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>

这是我想出的javascript：

<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>

这里是小提琴：https://jsfiddle.net/3q3ajusL/7/

你能帮忙吗？

Answer 1

根据您的要求，这应该可以找到您要查找的内容。代码越来越难以理解，所以我的做法略有不同。

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('\r\n');

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

            return true;
        });

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

Answer 2

你已经差不多完成了..添加流程功能。

    <script>
     jQuery(document).ready(function($) {
         $('#k_search').keyup(function() {   
              var sel = [];     
              var sel_text = $(this).val();
              console.log(sel_text);
              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);
            }

         });
     });

     function process(a) {
        console.log(a[0]);   
     }
</script>