<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>
</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;
}
.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.
*/
function myTest() {
console.log($(this).html());
}
$(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","Josh Smith","Mara Smith",
"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) {
var x = $('<div/>')
.data('ui-autocomplete-item', item)
.append("<li class='list-group-item'> <div class='row'> <div class='col-md-12 my-item' onclickxpto='myTest()'> <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> </div> </div> </li>")
.appendTo($('#autocompleteTest'));
$(".my-item").off("click");
$(".my-item").on("click", function(event, obj){
console.log($(this).text());
//myTest(obj);
});
return x;
};
$("#x").on("click",function () {
$("#searchText").val('');
});
// .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>")
});
