Скрыть флажки, если они не соответствуют ввода текста

Question

В принципе у меня есть список флажков, как так

<label style='padding-right:30px;' > 
<input type='checkbox' name='tag[]' value='1'> bob ; 
<input type='checkbox' name='tag[]' value='2'> john ; 
<input type='checkbox' name='tag[]' value='3'> mary ; 
</label> 

У меня также есть поле ввода для пользователя ввести то, что флажок, чтобы показать

<input type="text" name="filter" placeholder="Filter Tag Name" id="filter" > 

Я хочу, когда пользователь набирает bob, все флажки без текстового значения bob будут скрыты.

Я в настоящее время есть Java-скрипт, но он сопрягает значение флажка не текст из него

JS следующим

<script src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('#filter').on('keyup', function() { 
    var query = this.value; 
    $('[name^="tag[]"]').each(function(i, elem) { 
       if (elem.value.toLowerCase().indexOf(query) != -1) { 
        $(this).parent().css('display', 'inline-block'); 
        $(this).css('display', 'inline-block'); 
       }else{ 
        $(this).parent().css('display', 'none'); 
        $(this).css('display', 'none'); 
       } 
     }); 
    }); 
</script> 

Answer 1

1. Surround ваши флажков с пролетами легко извлечь их текст
2. Используйте событие input, которое будет срабатывать при каждом изменении ввода. Это лучше, чем keyup, потому что keyup может подавать ель при нажатии кнопки ctrl
3. Установите флажок по умолчанию. Затем проверьте, содержит ли его значение обрезанное значение значение фильтра. Если нет, то скрыть

$('#filter').on('input', function() { 
 
    var filter = $(this).val(); 
 
    var options = $('span:has(:checkbox)'); 
 
    options.each(function() { 
 
    $(this).show(); 
 
    if ($(this).text().trim().indexOf(filter) < 0) { 
 
     $(this).hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<label style='padding-right:30px;' > 
 
<span><input type='checkbox' name='tag[]' value='1'> bob</span> 
 
<span><input type='checkbox' name='tag[]' value='2'> john </span> 
 
<span><input type='checkbox' name='tag[]' value='3'> mary </span> 
 
</label> 
 
<input type="text" name="filter" placeholder="Filter Tag Name" id="filter" >

Answer 2

1. Использования label для каждого чекбокса отдельно, так что каждый флажок можно проверить с помощью своего собственного label
2. Используйте data атрибут для хранения флажка родственных информация о checkbox.

Demo

$('#filter').on('keyup', function() { 
 
    var query = $(this).val(); 
 

 
    $('[name^="tag[]"]').each(function(i, elem) { 
 
    var dataUser = $(this).data('user').toLowerCase(); 
 

 
    $(this).parent().toggle(query.indexOf(dataUser) > -1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<label> 
 
    <input type='checkbox' name='tag[]' value='1' data-user="bob" />bob ;</label> 
 
<label> 
 
    <input type='checkbox' name='tag[]' value='2' data-user="john" />john ;</label> 
 
<label> 
 
    <input type='checkbox' name='tag[]' value='3' data-user="mary" />mary ;</label> 
 
<input type="text" name="filter" placeholder="Filter Tag Name" id="filter">