1

I am desperately trying to make the filtering work with multiple keywords. Somehow it doesnt work as expected. For example the keyword combination: laurene maria works but laurene maria ben or laurene ben or laurene clara and so on does not work. What have I dont wrong?

http://fiddle.jshell.net/7t8mgont/18/

var $quicksearch = $('#quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $container.isotope({
        filter: function() {
            return qsRegex ? $(this).text().match( qsRegex ) : true;
          }
    });
}) );

Above is the essential section of the entire code. I also added a fully functional JSFiddle for you.

I would appreciate some insight.

Edit: I was thinking of str.split(" "); not sure though. My implementation didnt work

Daniels
  • 111
  • 1
  • 13
  • The code you posted is for the searching by typing the keywords in the text input only, not the filter buttons and it is copied exactly from Dave Desandro's example. It is not for combination filtering with your buttons. You need to do some research on how its done, [v1.5 combo filters](http://isotope.metafizzy.co/v1/demos/combination-filters.html) – Macsupport Jan 03 '15 at 16:25
  • @Macsupport indeed and im thinking of str.split(" ");. Im studying regex by experimenting in the jsfiddle. – Daniels Jan 03 '15 at 16:27

2 Answers2

2

Already one year old post and quite ugly javascript but if anybody search it, the idea is there ;)

I've take the idea from the combine filters (http://codepen.io/desandro/pen/mCdbD) but combining multiple regex. laurene maria AND maria laurene are working

jQuery('.quicksearch').keyup(function () {
    $grid.isotope({
        filter: function () {
            var qsRegex = [];
            var resultRegex = [];
            var endResult = new Boolean();
            var searchID = jQuery('.quicksearch').val();
            var searchTable = searchID.split(" ");
            for (var i = 0; i < searchTable.length; i++) {
                qsRegex[i] = new RegExp(searchTable[i], 'gi');
                resultRegex[i] = qsRegex[i] ? jQuery(this).text().match(qsRegex[i]) : true;
                endResult = endResult && resultRegex[i];
            }
            return endResult;
        }
    });
});
Sebastien
  • 21
  • 4
  • Found this quite helpful. Thank you! I am still a bit baffled as to how this works though. I think my confusion is over how the isotope filter function operates. Does it iterate over each of the elements in the instance and apply the function to it to determine if it should be shown? – bornytm Jun 06 '16 at 22:22
0

Well, you have a few options.

Assuming that you only need to match words consecutively, e.g. laurene ben and not ben laurene, you can just pump simple regex into the string. You are exactly right with str.split(' '). So, to match any words that follow consecutively and allow for other words to come in between in the target string, use:

var regexVal = $quicksearch.val().split(/\s+/).join('\\b.*');
qsRegex = new RegExp(regexVal, 'gi');

I used .split(/\s+/) to match any number of consecutive spaces. The \\b makes sure that entire words are matched. If you would rather that the user be able to type any number of characters in any of the words, just take that out:

var regexVal = $quicksearch.val().split(/\s+/).join('.*');
qsRegex = new RegExp(regexVal, 'gi');

JSFiddle Here

bowheart
  • 4,616
  • 2
  • 27
  • 27