Hide/show checkboxes based on user input in text field

You can see my current html/css/js here http://ift.tt/1U9Rz3c. The 'groups' (checkbox list) will be much, much longer when I have actual content. I need the user to be able to begin typing in the input field and narrow down the checkboxes they have available. For example, if they began typing 'grou', all checkboxes would still be there because they all contain 'group'. If the began typing 'cool', than they would be left with one checkbox 'Cool Group' to select.

I would like to be able to add this code to the current object that i am using to hide and show the checkboxes which looks like this:

StoryGroup = {
  groupInput: '.story-group-container input[type="text"]',
  container: '.checkbox-container',
  submit: '.checkbox-container .filter',
  body: 'body',
  init: function() {
    $(this.groupInput).click(this.showForm.bind(this));
    $(this.body).click(this.hideForm.bind(this));
  },
  showForm: function(e) {
    e.stopPropagation();
    $(this.container).show();
  },
  hideForm: function(e) {
    if (!($(e.target).is(this.groupInput) || $(e.target).is(this.container + "," + this.container + " *"))) {
      $(this.container).hide();
    }
  }
}