add [und] + [oder], um den Filter nach einer foreach generierten Liste zu suchen

Question

So habe ich bereits einen Suchfilter an Ort und Stelle, aber jetzt möchte ich, dass er combine Sätze suchen kann. Unten ist der Code, der eine Liste auf der Seite generiert.

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

Diese Liste erzeugt grundsätzlich Blöcke wie:

frank 
hello how are you 
link to audio file 

william 
i am fine 
link to audio file 

frank 
what? 
link to audio file 

Die Filterung durch diesen Code

$('#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'); 
     } 
    }); 
}); 

, die mit

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

Frage

01 arbeitet zusammen getan wird

Wie kann ich den Filter ändern, um mehrere Suchsätze mit [AND] und möglicherweise auch [OR] wenn möglich zu ermöglichen. So kann der Anwender zum Beispiel in Typ:

frank [and] hello

und dies wird dann wieder

frank 
hello how are you 
link to audio file 

Answer 1

Obwohl dieses Projekt nicht in geraumer Zeit aktualisiert worden zu sein scheint, können Sie wahrscheinlich nutzen Teile es für Ihre Bedürfnisse zu arbeiten: 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'); 
     } 
    }); 
}); 

es ReParse hinter den Kulissen benutzt b Sie können Ihre Suche nach einer vordefinierten Grammatik aufteilen und dann nach Übereinstimmungen suchen.

bearbeiten

---

Wenn Sie wirklich versuchen, es zu halten, super einfach, kann es nicht extrem flexibel sein, aber man könnte versuchen, diesen Ansatz. Dies gibt grundsätzlich die Möglichkeit, unter Verwendung [AND] oder [OR] aber nicht beide zu suchen. Könnte wahrscheinlich etwas Refactoring verwenden, da ich es einfach schnell hochgepeitscht habe.

$('#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'); 
     } 
    } 
});