JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<input class="clearable search-filter" type="text" name="" value="" placeholder="Filter durchsuchen" />
<ul class="clearfix scale">
    <li>
        <input type="checkbox" value="230" name="q[filter][attributes][]" id="fa230">
        <label for="fa230" class="clearfix">
<span class="unit size2of3 filter-name">Stadthotel</span>

<span class="unit last-unit filter-count">(241)</span>

        </label>
    </li>
    <li>
        <input type="checkbox" value="232" name="q[filter][attributes][]" id="fa232">
        <label for="fa232" class="clearfix">
<span class="unit size2of3 filter-name">Kongresshotel</span>

<span class="unit last-unit filter-count">(78)</span>

        </label>
    </li>
    <li>
        <input type="checkbox" value="220" name="q[filter][attributes][]" id="fa220">
        <label for="fa220" class="clearfix">
<span class="unit size2of3 filter-name">Designerhotel</span>

<span class="unit last-unit filter-count">(35)</span>

        </label>
    </li>
    <li class="js-more-filter hidden 

 ">
        <input type="checkbox" value="227" name="q[filter][attributes][]" id="fa227">
        <label for="fa227" class="clearfix">
<span class="unit size2of3 filter-name"> Luxushotel</span>

<span class="unit last-unit filter-count">(15)</span>

        </label>
    </li>
    <li class="js-more-filter hidden 

 ">
        <input type="checkbox" value="234" name="q[filter][attributes][]" id="fa234">
        <label for="fa234" class="clearfix">
<span class="unit size2of3 filter-name"> Wellnesshotel</span>

<span class="unit last-unit filter-count">(12)</span>

        </label>
    </li>
    <li class="js-more-filter hidden 

 ">
        <input type="checkbox" value="276" name="q[filter][attributes][]" id="fa276">
        <label for="fa276" class="clearfix">
<span class="unit size2of3 filter-name"> Familienhotel</span>

<span class="unit last-unit filter-count">(8)</span>

        </label>
    </li>
    <li>
        <input type="checkbox" value="44"...

CSS

.clearable {
    background:url(http://i.imgur.com/z7ZSYjt.png) no-repeat right -10px center;
    border:1px solid #999;
    padding:3px 18px 3px 4px;
    /* same right-padding like offset */
    border-radius:3px;
    transition: background 0.4s;
}
.clearable.x {
    background-position: right 5px center;
}
.clearable.onX {
    cursor:pointer;
}

JavaScript

jQuery.expr[':'].contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

function toggle(v) {
    return v ? 'addClass' : 'removeClass';
}

$(document).on('input', '.clearable', function () {
    $(this)[toggle(this.value.length)]('x');
}).on('mousemove', '.x', function (e) {
    $(this)[toggle(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function () {
    $(this).removeClass('x onX').val('');
    $('.search-filter').trigger('clear');
});

$('.search-filter').on('keydown clear', function () {
    if (this.value.length === 0) {
        $('ul li').show();
    } else {
        $('ul li').hide()
            .find('label .filter-name:contains(' + this.value + ')').parents('li').show();
    }
});