テキストフィールドのユーザー入力に基づくチェックボックスを非表示/表示

Question

ここに私の現在のhtml/css/jsが表示されますhttps://jsfiddle.net/cu0cvem2/。 'グループ'（チェックボックスリスト）は、実際のコンテンツがある場合はずっと長くなります。ユーザーが入力フィールドに入力を開始し、利用可能なチェックボックスを絞り込む必要があります。たとえば、 'grou'と入力した場合、すべてが 'group'を含んでいるため、すべてのチェックボックスはそこに残ります。 「cool」と入力した場合は、「Cool Group」のチェックボックスを1つ選択してください。

私は、私はこのようになりますチェックボックスを非表示にし、表示するために使用しています現在のオブジェクトにこのコードを追加できるようにしたいと思います：

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