根據用戶在文本字段中的輸入隱藏/顯示覆選框

Question

您可以在這裏看到我目前的html/css/js https://jsfiddle.net/cu0cvem2/。當我有實際的內容時，'組'（複選框列表）將會更長，更長。我需要用戶能夠開始在輸入字段中輸入並縮小它們可用的複選框。例如，如果他們開始輸入'grou'，所有複選框將仍然存在，因爲它們都包含'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();