Twitter Bootstrap 2.1 Typeahead

Basic typeahead working with ajax

by chrischilcoat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.0/tinymce.min.js"></script>
<div class="ui-yakabox-iftty-email container-fluid">

  
  <div class="row ui-yakabox-iftty-email-to">
    <div class="col-md-12 ui-yakabox-padding-0">
      <div class="media">
        <div class="media-left">
          <span data-tooltip="Select contacts" aria-label="To - Select contacts" role="link" tabindex="1">To</span>
        </div>
        <div class="media-body">
          <ul class="list-group ui-yakabox-margin-0" style="display:;">
            
          </ul>
          <div class="form-group form-group-text" id="multiple-datasets">
            <label class="sr-only" for="recepients">Find Recepients</label>  
            <input type="email" class="form-control typeahead input-sm" id="recepients" placeholder="Type here to add recepients..." style="display:;">
          </div>
          
          <div class="row bg-primary" style="">
            <div class="col-sm-12">
              <p><strong>Hint: Here are 4 ways you can choose recepients:</strong></p>
            </div>
            <div class="col-sm-6">
              <strong>1. E-mail</strong>
              <p><small>Type an e-mail into the address bar and press enter.</small></p>
            </div>
            <div class="col-sm-6">
              <strong>2. Users & Teams</strong>
              <p><small>Type a User or Team name into the address bar.</small></p>
            </div>
            <div class="col-sm-6">
        ...

SCSS

.ui-yakabox-iftty-email {
  .row {
    border-bottom:1px solid #ccc;
    padding:10px;
    .tox-tinymce {
      border: none;
    }
    .tox-statusbar{
      display:none;
    }
    .row.bg-primary {
      color:#fff;
      margin-top:10px;
    }
  }
  .ui-yakabox-iftty-email-to,
  .ui-yakabox-iftty-email-cc {
    padding: 8px 10px 5px;
    .media, .media-body {
      overflow: visible;
    }
    .media-left {
      padding-top:1px;
    }
    .label.bg-success {
      color:#fff;
    }
    .list-group {
      display:inline-block;
    }
    ul.list-group:after {
      clear: both;
      display: block;
      content: "";
    }
    .list-group-item {
      float: left;
      border-radius:3px;
      padding: 1px 5px 1px;
      margin: 0 3px 0 0;
    }
    .form-group {
      background:none;
      min-width:200px;
      max-width:400px;
      display:inline-block;
      padding:0;
      vertical-align:top;
      visibility:hidden;
    }
    &:hover .form-group {
      visibility:visible;
    }
  }
  .ui-yakabox-iftty-email-subject { 
    padding: 3px 10px 3px;
    .form-control {
      width: 82%;
      display: inline;
      box-shadow:none;
      padding-left: 0;
      font-size: 14px;
      color:#333;
    }
    .form-control focus {
      box-shadow:none;
    }
    
  }
}

.form-group-text {
  background:none;
  border:none;
  box-shadow:none;
  margin:0;
  input {
    border:none;
    background:none;
    box-shadow:none;
    padding-left:0;
    height: 23px;
  }
  input:focus {
    box-shadow:none;
  }
}
.ui-yakabox-padding-0 {
  padding:0 !important;;
}
.ui-yakabox-margin-0 {
  margin:0 !important;;
}

JavaScript

tinymce.init({
  selector: 'textarea',
  branding: false,
  resize: false,
  height : '350px',
  toolbar_items_size: 'small'
});

$('.js-proto-button-open-cc').on('click', function(){
   $('.ui-yakabox-iftty-email-cc').show().focus();
   $(this).hide();
});

$('body').on('click', '.list-group-item .fa-close', function () {
  $(this).parent().remove();
});

$('.ui-yakabox-iftty-email-to').on('click', function(e) {
  $('#recepients').show().val('').focus();
});

$('body').on('click', '.typeahead.dropdown-menu li', function () {
 var val = $(this).attr("data-value"),
     item = '<li class="list-group-item">'+ val +' <a class="fa fa-close"></a></li>';     
 $('.ui-yakabox-iftty-email-to').find('.list-group').append(item).show();
 $('.typeahead').val('').focus();
});

$('.row.bg-primary .btn').on('click', function() {
  $('.row.bg-primary').slideUp();
});

$('.label.bg-success').on('click', function() {
  $('.row.bg-primary').slideDown();
});

$('.ui-btn-encrypt').on('click', function() {
   
   var $this = $(this),
       $icon = $this.find('span'),
       $str = '';
   
   if ($icon.hasClass('fa-lock')) {
     $str = '<span class="fa fa-unlock"></span> Enable Encryption';
   } else {
     $str = '<span class="fa fa-lock"></span> Disable Encryption';
   }
       
   $this.html($str);
       
});

var jsonResponse = ["Publisher",
    "Nathalie Braun",
    "Payton West",
    "Destinee Carroll",
    "Damien Jackson",
    "Killian Burton",
    "Devyn Porter",
    "Rylee Sandoval",
    "Jackson Fry",
    "Ross Kemp",
    "Shyann Casey",
    "Braylon Holland",
    "Terry Horton",
    "App Factory",
    "Dev Team",
    "Management Team"];

var jsonResponse2 = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New...