"Facebook Unique Dropdown Autocomplete Search Form"
Bootstrap 3.3.0 Snippet by hectorblanco95

<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; } .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(''); }) });

Related: See More


Questions / Comments: