根据文本字段中的用户输入隐藏/显示复选框

Question

你可以在这里https://jsfiddle.net/cu0cvem2/ 看到我当前的 html/css/js。当我有实际内容时，“组”（复选框列表）会长得多。我需要用户能够开始在输入字段中输入并缩小他们可用的复选框。例如，如果他们开始输入“grou”，所有复选框仍然存在，因为它们都包含“组”。如果开始输入“cool”，那么他们将只剩下一个复选框“Cool Group”可供选择。

我希望能够将此代码添加到我用来隐藏和显示复选框的当前对象中，如下所示：

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

Answer 1

我认为您需要使用keyup 事件过滤结果..

Check this jsfiddle

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))
      .keyup(this.onKeyup.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();
    }
  },
  onKeyup: function(e) {
    var text = $(this.groupInput).val().toLowerCase();

    $(this.container)
      .find(".checkbox")
      .hide()
      .filter(function() {
        return this.innerText.toLowerCase().indexOf(text) > -1;
      }).show();
  }
}


StoryGroup.init();