添加 [and] + [or ] 来搜索 foreach 生成列表的过滤器

Question

所以我已经有了一个搜索过滤器，但现在我希望它能够

combine

搜索短语。下面是在页面上生成列表的代码。

<div class="sortable2">
  <ul class="connectedSortable links loadfiles" id="loadfiles">
    <?php
      foreach ($result as $value) {
        list($classname, $origin, $name) = explode('_', $value);
        $classname = trim($classname, '[]');
        $origin    = trim($origin, '[]');
        $name      = pathinfo($name, PATHINFO_FILENAME);
        echo "<li class='audiofile " . $name . " " . $classname . "' id='" . $value . "'>".
                "<a class='btn_clone fa fa-clone' aria-hidden='true' id='' onclick='repeat(event)' title='Clone'>&nbsp;</a>".
                "<a class='btn_addto fa fa-arrow-up' aria-hidden='true' id='' onclick='addto(event)' title='Add to playlist'>&nbsp;</a>".
                "<a class='btn_removefrom fa fa-trash' aria-hidden='true' id='' onclick='removefrom(event)' title='Remove element'>&nbsp;</a>".
                "<span class='audioclass'>" . $classname . "</span>".
                "<a href='" . $directoryname . "/" . $value . "' target='_blank'>".
                  "<img src='images/avatars/" . $classname . ".jpg'>".
                  "<div class='audiotext'>".
                    "<span class='audiotitle'>" . $name . "</span>".
                    "<span class='audioorigin'>" . $origin .  "</span>".
                  "</div>".
                "</a>".
              "</li>";
      }
    ?>
  </ul>

</div>

这个列表基本上生成如下块：

frank
hello how are you
link to audio file

william
i am fine
link to audio file

frank
what?
link to audio file

过滤就是通过这段代码完成的

$('#global_filter').keyup(function() {
    var col_name = $(this).attr('class');
    var search_val = $(this).val().toLowerCase();
    $('.' + col_name).closest('#loadfiles > li').css('display', 'none');
    $('.' + col_name).each(function() {
        var val = $(this).text();
        console.log($(this).text(), 'text');
        if(val.toLowerCase().indexOf(search_val) >= 0) {
            $(this).closest('#loadfiles > li').css('display', 'block');
        }
    });
});

与

一起工作

<div class="input">
  <h4>Search field</h4>
  <div class="all_all" id="filter_global">
    <div align="left"><input type="text" name="global_filter" id="global_filter" class="audiofile"></div>
    <div align="left"><input type="checkbox" name="global_regex"  id="global_regex" ></div>
    <div align="left"><input type="checkbox" name="global_smart"  id="global_smart"  checked></div>
  </div>
</div>

#问题

如何更改过滤器以允许使用

[AND]

以及

[OR]

（如果可能的话）进行多个搜索短语。因此用户可以输入例如：

frank [and] hello

然后这将返回

frank
hello how are you
link to audio file

Answer 1

虽然这个项目似乎已经有一段时间没有更新了，但您可能可以利用它的一部分来满足您的需求：https://github.com/bloomtime/boolean-expression-js

$('#global_filter').keyup(function() {

    // Init
    var col_name = $(this).attr('class');
    var search_val = $(this).val().toLowerCase();

    // Setup boolean expression
    var parsed = new Expression(search_val);

    $('.' + col_name).closest('#loadfiles > li').css('display', 'none');
    $('.' + col_name).each(function() {
        var val = $(this).text();
        if(parsed.test(val) == true) {
            $(this).closest('#loadfiles > li').css('display', 'block');
        }
    });
});

它在幕后利用 ReParse 能够根据预定义的语法拆分搜索，然后测试匹配。

编辑

---

如果你真的想让它超级简单，它可能不是非常灵活，但你可以尝试这种方法。这基本上提供了使用

[AND]

或使用

[OR]

进行搜索的能力，但不能同时使用两者。可能需要进行一些重构，因为我刚刚快速完成了它。

$('#global_filter').keyup(function() {

    // Init
    var col_name = $(this).attr('class');
    var search_val = $(this).val().toLowerCase();
    var columns = $('.' + col_name);

    // If doing a boolean AND
    if (search_val.toLowerCase().indexOf('[and]') >= 0) {
        // Get search parts
        var parts = search_val.split('[and]');
        $(columns).each(function(columnIndex, column) {
            var val = $(column).text();
            var matched = true;
            $(parts).each(function(partIndex, part) {
                // Since AND is inclusive, failing to match should assume this column is a non-match
                if (val.toLowerCase().indexOf(part.toLowerCase()) < 0) {
                    matched = false;
                    // Break early
                    return false;
                }
            });
            if (matched) {
                $(column).closest('#loadfiles > li').css('display', 'block');
            }
        });
    }

    // If doing a boolean OR
    else if (search_val.toLowerCase().indexOf('[or]') >= 0) {
        // Get search parts
        var parts = search_val.split('[or]');
        $(columns).each(function(columnIndex, column) {
            var val = $(column).text();
            var matched = false;
            $(parts).each(function(partIndex, part) {
                // With OR, if ANY of the parts match then it is a match
                if (val.toLowerCase().indexOf(part.toLowerCase()) >= 0) {
                    matched = true;
                    // Break early
                    return false;
                }
            });
            if (matched) {
                $(column).closest('#loadfiles > li').css('display', 'block');
            }
        });
    } else {
        var val = $(this).text();
        if(val.toLowerCase().indexOf(search_val) >= 0) {
            $(column).closest('#loadfiles > li').css('display', 'block');
         }
    }
});