I have a jQuery function that checks an input field and compares it to a list group. If the characters/words are found within a list item, it will only show thoses list items containing the exact match. I am using trim().split() to detect more that one word/ phrase.

Here my code:

```
$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.filterlist>li').show();
  } else {
    var subValues = valThis.trim().split(', ');
    $('.filterlist>li').each(function () {
      var node = $(this);
      var text = node.text().toLowerCase();  
      if (subValues.some(function (word) {
        return text.indexOf(word) !== -1;
      })) {
        node.show();  
      }
      else {
        node.hide();
      }
    });
  };
});

```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="box" type="text" placeholder="Search">

<ul class="filterlist" style="list-style:none;">
  <li>1. red</li>
  <li>2. blue</li>
  <li>3. red blue yellow</li>
  <li>4. blue red yellow</li>
  <li>5. red yellow</li>
  <li>6. red green</li>
</ul>

```

This works great, if you input 'red, yellow' all items containing either word shows only the list items that contain those words i.e all items will show except, for item '2' as it only has 'blue'.
On the other hand if you input 'red yellow', it would only return items '4' and '5', because of the exact match.

*However my question is*, is there a way to keep this function but add in a condition somehow that would allow a user to show the items containing only what is input, but does not have to be an exact match? i.e. input = 'red+yellow' > lists: '3', '4' and '5' or input = 'blue+green' > no lists are shown.

I have tried using the selectors ':contains()' and ':not(:contains())', but just can't get my head around it.

Any help would be massively appreciative.

**UPDATED:** 
Now adds in the input values as a class/s into the li tag.

```
$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();

  /* remove split character */
  var valClass = valThis.replace(',','');

  if (valThis == "") {
    $('.filterlist>li').show();
  } else {
    var subValues = valThis.trim().split(', ');
    $('.filterlist>li').each(function () {
      var node = $(this);
      var text = node.text().toLowerCase();  
      if (subValues.some(function (word) {
        return text.indexOf(word) !== -1;
      })) {
        node.show();
        $(this).removeClass().addClass(valClass);  
      }
      else {
        node.hide();
      }
    });
  };
});

```