Twitter Bootstrap 2.1 Typeahead

Basic typeahead working with ajax

by chrischilcoat

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<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 id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<div class="ui-yakabox-iftty-email container-fluid">

  <div class="row ui-yakabox-iftty-email-to">
    <div...

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...