Facebook friends tagging

by Naresh

HTML

<div class="wrapper">
   <input type="text" id="text-box" />
   <!-- create a button with id -->
   <button name="input" id="submit">Post</button>
   <ul class="name">
      <li id="1">Name 1</li>
      <li id="2">Name 2</li>
      <li id="3">Name 3</li>
      <li id="4">Name 4</li>
   </ul>
</div>

CSS

.wrapper {
   display: inline-block;
   width: 250px;
}

.name {
   /** hide the .name **/
   display: none;
   list-style: none;
   margin: 5px 0 0 0;
   padding: 0;
}

.name li {
   display: inline-block;
   background-color: #FFF;
   padding: 5px;
   width: 100%;
   box-sizing: border-box;
}

JavaScript

// 1) when input change value alert value
// 2) when click the button alert the value of the input
// 3) when input change value check length. If length > 3 characters alert value
// 4) when input change value check if string contains @
// 5) if yes, alert string after @
// 6) show the ul.name only when string contains @ and string length after @ is > 2
// 7) if ul.name li clicked, get the text of the li and replace myString
// 8) hide the ul.name after ul.name li clicked
// 9) alert id instead of name
// 10) instead of replacing myString with name, now replace myString with a link
// <a href="path/id">name</a>

$(document).ready(function() {
   $('#text-box').keyup(function() {
      var val = $("input").val();
      if (val.indexOf('@') >= 0) {
         var myString = val.substr(val.indexOf("@") + 1)
         if (myString.length > 2) {
            $('.name').show();
            $('ul.name li').click(function() {
               var name = $(this).text();
               alert(name);
					//val = val.replace(myString, '@' + name);
            });
				$('.name').click(function(){
					$('.name').hide();
				});
         }
      }
   });
   $('button').click(function() {
      var value = $("#text-box").val();
      alert(value);
   });
});