JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<span>Type filter text here: </span><input id="filterParams" />
<div class="filter">
    <div class="tags">
        <div class="col">
            <label>
                <input type="checkbox" rel="accounting" />Accounting</label>
            <label>
                <input type="checkbox" rel="courier" />Courier</label>
            <label>
                <input type="checkbox" rel="project-management" />Project Management</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
            <label>
                <input type="checkbox" rel="video-games" />Dentistry</label>
            <label>
                <input type="checkbox" rel="video-games" />Librarian</label>
            <label>
                <input type="checkbox" rel="video-games" />Programmer</label>
            <label>
                <input type="checkbox" rel="video-games" />Architect</label>
        </div>
        <div class="col">
            <label>
                <input type="checkbox" rel="video-games" />Photographer</label>
            <label>
                <input type="checkbox" rel="video-games" />IT</label>
            <label>
                <input type="checkbox" rel="video-games" />Artist</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
        </div>
        <div class="col">
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
            <label>
                <input type="checkbox" rel="video-games" />Video Games</label>
           ...

CSS

.filter {
    width: 650px;
    padding: 25px;
    border: 1px solid black;
    margin: 25px;
}
.col {
    width: 32%;
    display: inline-block;
    vertical-align: top;
}
.col label {
    display: block;
}

JavaScript

var theLabels = $('.col label').clone();
console.log(theLabels);

$('#filterParams').keyup(function() {
    $('.col label').remove();
    var filterText = $(this).val().toLowerCase();
    
    var labelsToShow = $(theLabels).filter(function(index, label) {
        return $(label).text().trim().toLowerCase().indexOf(filterText) > -1;
    });
    
    putInColumns(labelsToShow);
});

function putInColumns(labels) {
    var height = 8;
    var numCols = 3;
    var currentCol = 0;
    
    $(labels).each(function(index, label) {
        if ($('.col').eq(currentCol).children().length >= 8)
        {
            currentCol++;
        }
        $('.col').eq(currentCol).append($(label));
    });
}