Bootstrap Snippet Facebook Autocomplete Search Form" using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * 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",
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Facebook Autocomplete Search Form""
Bootstrap 3.0.0 Snippet by eduluz1976

Related: See More

Questions / Comments:

"Facebook Autocomplete Search Form"" Bootstrap 3.0.0 Snippet by eduluz1976

Related: See More

Questions / Comments:

"Facebook Autocomplete Search Form""
Bootstrap 3.0.0 Snippet by eduluz1976