<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4 col-md-offset-4">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<div class="input-group">
<input type="hidden" name="search_param" value="name" id="search_param">
<input id="searchText"type="text" class="form-control" name="q" placeholder="Search Friends" id="search_key" value="">
<span class="input-group-btn">
<a id="x" class="btn btn-default hide" href="#" title="Clear"><i class="glyphicon glyphicon-remove"></i> </a>
<button class="btn btn-info" type="submit"> Search </button>
</span>
</div>
</div>
<!-- List group -->
<ul id="autolist" class="list-group">
<div id="autocompleteTest">
</div>
<li id="fav" class="list-group-item">
<div class="row">
<div id="favorites" class="">
<div class="container">
<span class="glyphicon glyphicon-star"> </span><b>Favorites</b>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class='row'>
<div class='col-md-12'>
<div class='media-left media-middle'>
<a href='#'>
<img class='media-object img-circle' src='http://placehold.it/40x40'>
</a>
</div>
<div id='center'>
Favorite Person #1
<div id='center' class='material-switch pull-right'>
<input id='someSwitchOptionPrimary' name='someSwitchOption001i' type='checkbox' checked="true"/>
<label for='someSwitchOptionPrimary' class='label-primary'></label>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-12">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-circle" src="http://placehold.it/40x40">
</a>
</div>
<div id="center">
Favorite Person #2
<div id="center" class="material-switch pull-right">
<div class="material-switch pull-right">
<input id="someSwitchOptionSuccess" name="someSwitchOption001" type="checkbox" checked="true"/>
<label for="someSwitchOptionSuccess" class="label-primary"></label>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-12">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-circle" src="http://placehold.it/40x40">
</a>
</div>
<div id="center">
Favorite Person #3
<div id="center" class="material-switch pull-right">
<div class="material-switch pull-right">
<input id="someSwitchOptionInfo" name="someSwitchOption001" type="checkbox" checked="true"/>
<label for="someSwitchOptionInfo" class="label-primary"></label>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-12">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-circle" src="http://placehold.it/40x40">
</a>
</div>
<div id="center">
Favorite Person #4
<div id="center" class="material-switch pull-right">
<div class="material-switch pull-right">
<input id="someSwitchOptionWarning" name="someSwitchOption001" type="checkbox" checked="true"/>
<label for="someSwitchOptionWarning" class="label-primary"></label>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-12">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-circle" src="http://placehold.it/40x40">
</a>
</div>
<div id="center">
Favorite Person #5
<div id="center" class="material-switch pull-right">
<div class="material-switch pull-right">
<input id="someSwitchOptionDanger" name="someSwitchOption001" type="checkbox" checked="true"/>
<label for="someSwitchOptionDanger" class="label-primary"></label>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="">
<ul id="autocompleteTest">
</ul>
</div>
</div>
</div>
</div>
.material-switch > input[type="checkbox"] {
display: none;
}
body{
margin-top:50px;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px;
}
#custom-search-form {
margin:0;
margin-top: 5px;
padding: 0;
}
#custom-search-form .search-query {
padding-right: 3px;
padding-right: 4px \9;
padding-left: 3px;
padding-left: 4px \9;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: width 0.2s ease-in-out;
-moz-transition:width 0.2s ease-in-out;
-o-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
}
#custom-search-form button {
border: 0;
background: none;
/** belows styles are working good */
padding: 2px 5px;
margin-top: 2px;
position: relative;
left: -28px;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.search-query:focus + button {
z-index: 3;
}
.search-query:focus{
width: 260px;
}
.list-group-item:hover{
cursor: pointer;
}
.media-left{
display: inline-block;
}
#center{
margin-top:10px;
display: inline;
}
#favorites{
margin-left: -5px
}
#fav{
font-size: 12px;
font-weight: 700;
color: #959595;
text-transform: uppercase;
letter-spacing: 1px;
content: "Favorites";
}
/**
* Created by Mitko on 9/8/2016.
*/
$(document).ready(function () {
$("#searchText").click(function () {
$("#x").removeClass('hide');
});
$(".list-group-item").hover(function () {
$(this,".list-group-item").css('background-color','rgba(172, 172, 172, 0.11)');
},function () {
$(this,".list-group-item").css('background-color','white');
});
$("#searchText").on( "trigger", function () {
if ($( "#searchText" ).val()==''){
$('#autocompleteTest').empty();
}
return false;
} );
$("#autocompleteTest").empty();
var availableTags = [
"John Smith",
"Grisel Salmons",
"Loree Pollak",
"Kena Vanhorne",
"Rodger Reuben",
"Karen Mccutcheon",
"Lourdes Newnam",
"Cher Gershon",
"Wava Hiers",
"Georgine Gillette",
"Marquetta Trotter"
];
$('#searchText').autocomplete({
search: function(event, ui) {
$('#autocompleteTest').empty();
$("#x").removeClass('hide')
},
close:function(){
if ($('#searchText').val()==''){
$('#autocompleteTest').empty();
}
$("#x").addClass('hide')
},
minLength: 1,
source: availableTags
}).data('ui-autocomplete')._renderItem = function(ul, item) {
return $('<div/>')
.data('ui-autocomplete-item', item)
.append("<li class='list-group-item'> <div class='row'> <div class='col-md-12'> <div class='media-left media-middle'> <a href='#'> <img class='media-object img-circle' src='http://placehold.it/40x40'> </a> </div> <div id='center'>" + item.value + "<div id='center' class='material-switch pull-right'> <input id='"+item.value+"' name='someSwitchOption001i' type='checkbox'/> <label for='"+item.value+"' class='label-primary'></label> </div> </div> </div> </div> </li>")
.appendTo($('#autocompleteTest'));
};
$("#x").on("click",function () {
$("#searchText").val('');
})
});
