Question

您可以在此处查看我当前的html / css / js https://jsfiddle.net/cu0cvem2/。当我有实际内容时，'群组'（复选框列表）会更长很长。我需要用户能够开始输入输入字段并缩小他们可用的复选框。例如，如果他们开始输入'grou'，则所有复选框仍然存在，因为它们都包含'group'。如果开始输入'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();

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

1 个答案: