JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.1.0/lodash.underscore.min.js"></script>
<script src="http://bseth99.github.io/jquery-ui-multisearch/src/jqueryui-multisearch.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
   <div class="row">
      <div class="col-lg-3">
      </div>

      <div class="col-lg-6">


         <br/>
         <div id="name-search">

            <div class="row">
               <div class="col-lg-12">
                  <div class="panel panel-default">
                     <div class="panel-body" data-role="selected-list">
                        <input class="pull-left" data-role="input" type="text" placeholder="Search..."/>
                     </div>
                  </div>
               </div>
            </div>

            <div data-role="picker" class="panel panel-default">
               <div class="list-group" data-role="picker-list">
               </div>
            </div>

         </div>

      </div>


      <div class="col-lg-3">
      </div>
   </div>
</div>

<script id="picker-item" type="text/template">
   <a href="#" class="list-group-item"><%= name %></a>
</script>

<script id="selected-item" type="text/template">
   <a href="#" class="label label-info pull-left"><%= name %>
      <% if ( times > 1 ) { %>
         <span class="badge"><%= times %></span>
      <% } %>
   </a>
</script>

CSS

input[data-role="input"] {
   outline: none;
   border: none;
   font-size: 14px;
   font-weight: normal;
   line-height: 1.42857;
   vertical-align: middle;
   padding: 6px 12px;
}}
a.list-group-item.hover {
    background-color: #F5F5F5;
    text-decoration: none;
}
a.label-info {
    margin: 4px 3px;
    font-size: 14px;
}
a.label-info.hover {
    background-color: #31B0D5;
}
a.label-info.active {
    background-color: #ADE0EE !important;
}
a.label-info .badge {
    font-size: 9px;
    padding: 1px 5px;
}

JavaScript

$("#name-search").multisearch({
      source: babyNames,
      keyAttrs: ['name'],

      formatPickerItem: _.template( $('#picker-item').html() ),
      formatSelectedItem: _.template( $('#selected-item').html() ),

      adding: function( event, ui ) {
         if ( !ui.data.times )
            ui.data.times = 0;

         ui.data.times++;
      },

      duplicate: function( event, ui ) {
         ui.existing.times++;
         $('#name-search').multisearch( 'add', ui.existing );
      },
   });

   $("#name-search").multisearch('value', [
      { name: 'Jackson', times: 1 },
      { name: 'Savannah', times: 1 },
      { name: 'Abigail', times: 1 },
      { name: 'Adam', times: 1 },
      { name: 'Oliver', times: 1 },
      { name: 'Christian', times: 1 },
      { name: 'William', times: 1 },
      { name: 'Alex', times: 1 },
      { name: 'Victoria', times: 1 },
      { name: 'Lillian', times: 1 },
      { name: 'Alexandra', times: 1 },
      { name: 'Declan', times: 1 },
      { name: 'Alice', times: 1 },
      { name: 'Lucas', times: 1 }
   ]);



var babyNames = [
   { name: 'Aaliyah' },
   { name: 'Aaron' },
   { name: 'Abigail' },
   { name: 'Adam' },
   { name: 'Addison' },
   { name: 'Adrian' },
   { name: 'Aiden' },
   { name: 'Alex' },
   { name: 'Alexa' },
   { name: 'Alexander' },
   { name: 'Alexandra' },
   { name: 'Alexis' },
   { name: 'Alice' },
   { name: 'Allison' },
   { name: 'Alyssa' },
   { name: 'Amelia' },
   { name: 'Andrew' },
   { name: 'Anna' },
   { name: 'Annabelle' },
   { name: 'Anthony' },
   { name: 'Aria' },
   { name: 'Arianna' },
   { name: 'Asher' },
   { name: 'Aubrey' },
   { name: 'Audrey' },
   { name: 'Austin' },
   { name: 'Ava' },
   { name: 'Avery' },
   { name: 'Bailey' },
   { name: 'Bella' },
   { name: 'Benjamin' },
   { name: 'Bentley' },
   { name: 'Blake' },
   { name: 'Brandon' },
   { name: 'Brayden' },
   { name: 'Brianna' },
   { name: 'Brody' },
   { name: 'Brooke' },
   { name: 'Brooklyn' },
   { name:...