Bootstrap Snippet Contact List using HTML CSS Bootstrap jQuery

"Contact List"
Bootstrap 3.1.0 Snippet by mouse0270

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<a href="http://bootsnipp.com/mouse0270/snippets/4l0k2" class="btn btn-danger hide" id="back-to-bootsnipp">Back to Bootsnipp</a>
<div class="container">
    <div class="row">
        <h3>Developer Question</h3>
        <p>Can anyone tell me why this snippet flashes after the tooltip is removed from the DOM? It is driving me crazy!</p>
        <hr/>
        <h3>Developer Answer</h3>
        <p>It appears that tooltips do not like to be removed from within an <code>iframe</code> and cause the page to <em><strong>flash</strong></em>. If you are experiencing this issue with the tooltips please <a id="fullscreen" href="#fullscreen">click here</a> to view this snippet in an iframe.</p>
    </div>
    
    <div class="row form-group">
        <h3>Onwards to the snippet!</h3>
        <p>This snippet is a minimal contact list that allows you to search for anyone in the list by name, location, phone number or email.</p>
        <p> Give it a shot search for <code>s@</code> and you'll get everyone whos last character in their email is <code>S</code></p>
        <p> Or search for <code>Ln</code> and you'll get everyone whos location is a <code>Lane</code> rather than a <code>Street</code> or <code>Drive</code>.</p>
        <p> Or search for <code>22</code> and you'll get everyone whos phone number or location has a <code>22</code> in it.</p>
        <hr/>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-offset-3 col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading c-list">
                    <span class="title">Contacts</span>
                    <ul class="pull-right c-controls">
                        <li><a href="#cant-do-all-the-work-for-you" data-toggle="tooltip" data-placement="top" title="Add Contact"><i class="glyphicon glyphicon-plus"></i></a></li>
                        <li><a href="#" class="hide-search" data-command="toggle-search" data-toggle="tooltip" data-placement="top" title="Toggle Search"><i class="fa fa-ellipsis-v"></i></a></li>
                    </ul>
                </div>
                
                <div class="row" style="display: none;">
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
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
    padding: 30px 0px 60px;
}
.panel > .list-group .list-group-item:first-child {
    /*border-top: 1px solid rgb(204, 204, 204);*/
}
@media (max-width: 767px) {
    .visible-xs {
        display: inline-block !important;
    }
    .block {
        display: block !important;
        width: 100%;
        height: 1px !important;
    }
}
#back-to-bootsnipp {
    position: fixed;
    top: 10px; right: 10px;
}
.c-search > .form-control {
   border-radius: 0px;
   border-width: 0px;
   border-bottom-width: 1px;
   font-size: 1.3em;
   padding: 12px 12px;
   height: 44px;
   outline: none !important;
}
.c-search > .form-control:focus {
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none;
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
$(function () {
    /* BOOTSNIPP FULLSCREEN FIX */
    if (window.location == window.parent.location) {
        $('#back-to-bootsnipp').removeClass('hide');
    }
    
    
    $('[data-toggle="tooltip"]').tooltip();
    
    $('#fullscreen').on('click', function(event) {
        event.preventDefault();
        window.parent.location = "http://bootsnipp.com/iframe/4l0k2";
    });
    $('a[href="#cant-do-all-the-work-for-you"]').on('click', function(event) {
        event.preventDefault();
        $('#cant-do-all-the-work-for-you').modal('show');
    })
    
    $('[data-command="toggle-search"]').on('click', function(event) {
        event.preventDefault();
        $(this).toggleClass('hide-search');
        
        if ($(this).hasClass('hide-search')) {        
            $('.c-search').closest('.row').slideUp(100);
        }else{   
            $('.c-search').closest('.row').slideDown(100);
        }
    })
    
    $('#contact-list').searchable({
        searchField: '#contact-list-search',
        selector: 'li',
        childSelector: '.col-xs-12',
        show: function( elem ) {
            elem.slideDown(100);
        },
        hide: function( elem ) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

hi Ä±m need downlod fÄ±le can you help me

alisoroori () - 3 years ago - Reply 0

nice snippet,,thanks

Taufik Masruri () - 7 years ago - Reply 0

i have a problem in the scripts its do not work

khkh () - 7 years ago - Reply 0

very giod book

èµµé‘«ç†™ () - 7 years ago - Reply 0

wow
dsl;dk
dad

jeffy () - 7 years ago - Reply 0

nice.

jefferson ciotti () - 7 years ago - Reply 0

hiiii

ajay () - 8 years ago - Reply 0

you are so lazy to do the "ADD USER" hahah sory :) this snippet help me in my project thank you

Dhaouadi Kassem () - 8 years ago - Reply 0

Argh.... Why mine not work....
Can someone share the exact code use...
I can't open the search box

Izwan () - 8 years ago - Reply 0

test

test () - 8 years ago - Reply 0

aaaaaaaaaaaaaaasas

eu () - 8 years ago - Reply 0

test

da () - 8 years ago - Reply 0

aaaaaaaaaa

ddgdgdg () - 8 years ago - Reply 0

svvgsvscvsv

ddgdgdg () - 8 years ago - Reply 0

heysws
]

qwe
dwq
d

adfwefrwe () - 9 years ago - Reply 0

rt () - 9 years ago - Reply 0

erferferfe

erg () - 9 years ago - Reply 0

grg

erg () - 9 years ago - Reply 0

TypeError: $(...).searchable is not a function....
Anyone can help me with this.
Thanks :)

Jonathan Rivel () - 9 years ago - Reply 0

You need to add the searchable script at the bottom of your page (right before the contact list script):

David () - 9 years ago - Reply 0

I use this js fr searcj but not work disply result; please any help (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_list)

function myFunction() {

var input, filter, ul, li, a, i, txtValue;

input = document.getElementById("contact-list-search");

filter = input.value.toUpperCase();

ul = document.getElementById("contact-list");

li = ul.getElementsByTagName("li");

for (i = 0; i < li.length; i++) {

a = li[i].getElementsByTagName("a")[0];

txtValue = a.textContent || a.innerText;

if (txtValue.toUpperCase().indexOf(filter) > -1) {

li[i].style.display = "";

} else {

li[i].style.display = "none";

}

</script>

Mpunga () - 4 years ago - Reply 0

Please let me know how

Mpunga () - 4 years ago - Reply 0

You're not being lazy, you're being creative! Perfect snippet buddy, thanks!

waiylgeek () - 9 years ago - Reply 0

å¤§æ³•å¸ˆå¤§æ³•

dsfad () - 9 years ago - Reply 0

Ø´Ø³Ø¶ÛŒØ¶ÛŒØ¶ÛŒØ¶ÛŒ

REZA () - 9 years ago - Reply 0

rfwefewffegfewge
yrhyreyhreyhryh

safd () - 9 years ago - Reply 0

ZZaz

safd () - 9 years ago - Reply 0

hey

Jamal Shobo Thuku () - 9 years ago - Reply 0

Great thanks for sharing!

Fernando Castro () - 9 years ago - Reply 0

hola a todos el mungo

alexander () - 10 years ago - Reply 0

Module commentaires

JP () - 10 years ago - Reply 0

Ceci est un test

JP () - 10 years ago - Reply 0

commentaires en volet de droite

IdÃ©e () - 10 years ago - Reply 0

That's a good good one!That's a good good one!That's a good good one!