3#.Address book - Design it & Code it

by secretgspot

HTML

<div id="main" role="main">

  <div class="element custom">

    <div class="element-header">
      <input id="search" type="text" name="s" value="" placeholder="search" autocomplete="off">
      <h2>Kasper contacts</h2>
    </div>

    <div class="element-content">
    
      <ul class="list">
        <li id="index-A" data-group="work">
          <a href="#">Amy Laudrie<span>[email protected]</span></a>
        </li>
        <li data-group="family">
          <a href="#">April Meiny<span>[email protected]</span></a>
        </li>
        <li id="index-B" data-group="work">
          <a href="#">Benny Iridos<span>[email protected]</span></a>
        </li>
        <li data-group="work">
          <a href="#">Bill Doe<span>[email protected]</span></a>
        </li>
        <li id="index-C" data-group="friends">
          <a href="#">Clark Graver<span>[email protected]</span></a>
        </li>
        <li id="index-D" data-group="friends">
          <a href="#">Danny Perie<span>[email protected]</span></a>
        </li>
        <li id="index-J" data-group="family">
          <a href="#">John Doe <span>[email protected]</span></a>
        </li>
        <li id="index-L" data-group="work">
          <a href="#">Lucy Fer<span>[email protected]</span></a>
        </li>
        <li id="index-M" data-group="work">
          <a href="#">Megan Rize<span>[email protected]</span></a>
        </li>
        <li data-group="friends">
          <a href="#">Mike Ferg<span>[email protected]</span></a>
        </li>
        <li>
          <a href="#" class="add-new">+ Add new contact</a>
        </li>
      </ul>

      <div class="element-sidebar">
        <a href="#index-#">#</a>
        <a href="#index-A">A</a>
        <a href="#index-B">B</a>
        <a href="#index-C">C</a>
        <a href="#index-D">D</a>
        <a href="#index-E">E</a>
        <a href="#index-F">F</a>
        <a href="#index-G">G</a>
        <a href="#index-H">H</a>
        <a...

CSS

body { 
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
  font-size: 12px;
}

:focus {outline: none;}
* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;

  -ms-transition:.25s ease-in-out;
  -moz-transition:.25s ease-in-out;
  -o-transition:.25s ease-in-out;
  -webkit-transition:.25s ease-in-out;
  transition:.25s ease-in-out;
}

#main {
  background-image: url(http://dl.dropbox.com/u/20586331/DiCi/3.address_book/bg.jpg);
  width: 650px;
  height: 550px;
  position: relative;
  padding-top: 50px;
}

.element.custom {
  width: 300px;
  margin: 0 auto;
}

.element {
  background-color: #f3f3f3;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0px 1px 5px 0px #000;
     -moz-box-shadow: 0px 1px 5px 0px #000;
          box-shadow: 0px 1px 5px 0px #000;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

  /* === Header ==================== */
  .element .element-header {
    background: #4173b1 url(http://dl.dropbox.com/u/20586331/DiCi/3.address_book/bg-header.jpg);
    border: 1px solid #37598a;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
    height: 54px;
    padding: 16px; 
    position: relative;
    z-index: 2;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .element .element-header h2 {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 1px 0 #37598a;
    position: absolute;
    margin: 0;
  }
  .element .element-header input {
    background: #fff url(http://dl.dropbox.com/u/20586331/DiCi/3.address_book/glass.png) no-repeat 6px center;
    border: 0;
    border-bottom: 1px solid #37598a;
    border-radius: 80px;
    float: right;

    margin: 0;
    width: 0;
    padding: 0 11px;
    height: 22px;

    color: #fff;
    font-size: 11px;
...

JavaScript

/* 
 * 3#. Adress book - "Design it & Code it"
 * Author: Idered <http://idered.pl>, IderedPL[at]gmail[dot]com
 *
 * Please don't repost source of this on websites, instead give a link.
 * Thanks for Nijikokun <http://forr.st/-Nijikokun>, added 'provider function'
 * try this in input: provider:gmail 
 */
(function($) {

  // Search function for search input
  $.fn.liveSearch = function(list, exclude) {
    var input = $(this),
      regexp = {
        provider: /provider:([a-zA-Z0-9\.\-\_]+)/i,
        email: /\@([a-zA-z0-9\-\_\.]+)/i
      },
      elements = list.children().not(exclude),
      filter = function() {
        var term = input.val().toLowerCase();

        elements.show().filter(function() {
          var text = $(this).text().toLowerCase(),
            open = term.replace(regexp.provider, '').trim(),
            found = term.match(regexp.provider);

          if (found) {
            if (text.indexOf('@' + found[1]) != -1 && !open) {
              return false;
            } else {
              if (open && text.indexOf('@' + found[1]) != -1) return text.replace(regexp.email, '').toLowerCase().indexOf(open) == -1;
            }
          }

          return text.replace(regexp.email, '').toLowerCase().indexOf(term) == -1;
        }).hide();
      };

    input.on('keyup select', filter);

    return this;
  };

  $('#search').liveSearch($('.list'), ':last-child');

})(jQuery);