您可以在https://jsfiddle.net/cu0cvem2/看到我当前的html / css / js。当我有实际内容时,“组”(复选框列表)将长得多。我需要用户能够开始在输入字段中键入内容,并缩小他们可用的复选框的范围。例如,如果他们开始输入'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();
}
}
}
最佳答案
我认为您需要使用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();