jquery multiple select

by levan gongadze

HTML

<div class="multipleSelect">
                    <div class="selectedList"></div>
                    <input class="input" type="text" placeholder="აირჩიეთ სპიკერი">
                  </div>

                  <ul class="multipleList">
                  <li data-id="1">შოთა იორამაშვილი</li>
                  <li data-id="2">დავით გოჩავა</li>
                  <li data-id="3">ირაკლი ღარიბაშვილი</li>
                  <li data-id="4">ლევან ასათიანი</li>
                  <li data-id="5">მარი მელიქიშვილი</li>
                  <li data-id="6">ალექსი ამნიაშვილი</li>
                  <li data-id="7">სანდრო ასათიანი</li>
                  <li data-id="8">ლევან მელიქიშვილი</li>
                </ul>

CSS

html,body,ul{margin:0;padding:0}a{text-decoration:none}li{list-style-type:none}input,textarea,button{outline:none}*{transition:0.5s}@font-face{font-family:'BPG Arial';src:url("../fonts/bpg-arial-webfont.eot");src:url("../fonts/bpg-arial-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/bpg-arial-webfont.woff2") format("woff2"),url("../fonts/bpg-arial-webfont.woff") format("woff"),url("../fonts/bpg-arial-webfont.ttf") format("truetype"),url("../fonts/bpg-arial-webfont.svg#bpg_arialregular") format("svg")}@font-face{font-family:'BPG Arial Caps';src:url("../fonts/bpg-arial-caps-webfont.eot");src:url("../fonts/bpg-arial-caps-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/bpg-arial-caps-webfont.woff2") format("woff2"),url("../fonts/bpg-arial-caps-webfont.woff") format("woff"),url("../fonts/bpg-arial-caps-webfont.ttf") format("truetype"),url("../fonts/bpg-arial-caps-webfont.svg#bpg_arial_capsregular") format("svg")}.headerNavigation{width:100%;color:#fff;overflow:hidden;background:#1a173e}.headerNavigation li{float:left;transition:0.7s;display:inline-block;border-bottom:4px solid transparent}.headerNavigation li a{float:left;color:#b9bce9;display:block;transition:0.7s;padding:20px 20px 15px 20px;font-family:'BPG Arial Caps'}.headerNavigation li:hover{border-bottom:4px solid #f80a27}.headerNavigation li:hover .drop{display:block}.headerNavigation .drop{top:57px;width:200px;display:none;overflow:hidden;position:absolute;background:#1a173e}.headerNavigation .drop li{width:100%;border-bottom:0}.headerNavigation .drop li a{width:100%;float:none;padding:12px;font-size:13px}.headerNavigation .drop li a:hover{color:#fff}.userArea{top:0;right:0;border:0;outline:none;cursor:pointer;position:absolute;background:#f80a27;padding:8.5px 30px}.userArea .drop{background:#fff;width:150px;right:20px;text-align:center;border-radius:5px;border:1px solid #e9e9e9;border-top-left-radius:0;border-top-right-radius:0;padding:10px}.userArea .drop...

JavaScript

$('.multipleList').on('click', 'li',function(){
  var id = $(this).remove().data('id');
  $('.multipleList').hide();
  $('.selectedList').append('<div class="list"><input type="text" name="multiselect[]">'+$(this).text()+'<span data-id="'+id+'"></span></div>');
});

$(".multipleList li").click(function(){
  var id = $(this).remove().data('id');
  $('.multipleList').hide();
  $('.selectedList').append('<div class="list"><input type="text" name="multiselect[]">'+$(this).text()+'<span data-id="'+id+'"></span></div>');
});

$('.selectedList').on("click","span",function(){
  id=$(this).data("id");
  $('.multipleList').append('<li data-id="'+id+'">'+$(this).parents(".list").text()+'</li>');
  $(this).parents(".list").remove();
});

$(".input").keyup(function () {
  $('.multipleList').show();
    val = $(this).val();
    $(".multipleList li").map(function (index, value) {
      $(value).toggle($(value).text().toLowerCase().indexOf(val) >= 0);
    });
});