问题

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'); } } });。可能会使用一些重构，因为我很快就把它掀起了。

PATH=/usr/bin:/bin

添加[和] + [或]以搜索过滤器以获取foreach生成的列表

问题

1 个答案:

修改