Search text with given input.

by Shah Danial

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<section id='label-box'>

<div class='wrap-search'>
<div class="wrap-box">
<input placeholder="Add New or search/pick already label" id="label-search" type="text" /><span class='go'>add</span> 
</div>
<ul class="label-list">
    <li>Artis</li>
    <li>Sukan</li>
    <li>Pendidikan</li>
    <li>Berita</li>
    <li>Resepi</li>
    <li>Viral</li>
    <li>Keluarga</li>
    <li>Kewangan</li>
    <li>Kerjaya</li>
    <li>Iklan</li>
</ul>
</div>
<br><br>
<div id='labelresult'>

</div>


</section>

CSS

.label-list { display:none}

#labelresult span {
    border: 1px solid rgba(82, 82, 82, 0.74);
    color: #fff;
    background: #464646;
    border-radius: 3px;
    float: left;
    padding: 5px 30px 5px 10px;
    margin: 2.5px;
    position: relative;
    cursor:pointer;
}

#labelresult i {
    margin-left: 10px;
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    width: 30px;
    text-align: center;
    padding-top: 5px;
}

#labelresult {
    background: #f3f5f6;
    border: 1px solid #808080;
    float: left;
    padding: 2.5px;
    display: block;
    position: relative;
}

.wrap-search {
  
}

#label-search {
    border: 0;
}

#label-search, .go {
    border: 0;
    font-size: 15px;
    line-height: 15px;
    height: 34px;
    display: inline-block;
    padding-left: 10px;
    outline:0;
}

#label-search {
    width: 300px;
}

.go {
    border-left: 1px solid #ccc;
    position: absolute;
    background: #f3f5f6;
    text-align: center;
    padding: 10px 5px 0;
    width: 34px;
    right: 0;
    cursor:pointer;
}


.wrap-box {
    border: 1px solid #ccc;
    display: inline-block;
    height: 34px;
    overflow: hidden;
    position: relative;
}

JavaScript

// Label category picker

$(function(){

$('#label-search').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.label-list > li').show();           
    } else {
        $('.label-list > li').each(function(){
            var text = $(this).text().toLowerCase();
            if(text.indexOf(valThis) >= 0) { 
            $(this).prependTo(".label-list");
            }
        });
   };
});

$('.label-list li').click(function(){

var selected = '<span class="selected-label" title="click to remove">' + $(this).text() + '<i class="fa fa-times" aria-hidden="true"></i></span>';

$('#labelresult').append(selected);
$('.label-list').hide();
});

$('#label-search').focus(function(){
$('.label-list').show();
});


$('.wrap-box .go').click(function(){
var val = $('#label-search').val();
if(val){
var value = '<span class="selected-label" title="click to remove">' + val + '<i class="fa fa-times" aria-hidden="true"></i></span>';

$('#labelresult').append(value);
$('.label-list').hide();
$('#label-search').val(null);
}
});


$(document.body).on('click', '#labelresult span' ,function(){
$(this).remove();
});

});//function