title: Live styling part of text on list items to match user input
body: <p>A Meteor client code receives a live input from user as being typed into an input box via the template <code>keyup</code> event.  </p>
  
  <p>On the page there is list items with text in each.  I need to apply a style to the part of the text in any of the list items which matches what the user is typing.<br>
  My attempt is not applying any styling at all.  </p>
  
  <p>How can it be done? Thanks</p>
  
  <pre><code>'keyup .check-filter': function(event) {
    showMatches(event.target.value);
  }
  
  showMatches: (userInput) =&gt; {
    if (userInput.length &gt; 3) {
       //this is not doing the job for me.
      $('li').html($('li').html().replace('/' + userInput + '/gi', '&lt;span class="myCSS"&gt;' + $1 + '&lt; /span&gt;')); 
    }
  }
  </code></pre>