JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/typeahead.js/0.11.1/bloodhound.min.js"></script>
<script src="https://cdn.jsdelivr.net/typeahead.js/0.11.1/typeahead.jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.7.1/bootstrap-tagsinput.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.7.1/bootstrap-tagsinput.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<form method="post" id="form"action="">
    <input type="text" class="form-control" id="tagsinput" name="postedBy[]"value="" /><br><br>
    <br>
    <a class="btn btn-default"onclick="$('#postedBy_add').slideToggle()" data-type="postedBy"><i class="fa fa-plus"></i> add value</a>
    <div id="postedBy_add" style="display:none">
        <input type="text" id="postedBy_add_name"name="name"/>
        <input type="button" id="postedBy_add_button"value="save"/>
    </div>
    </form>

CSS

.bootstrap-tagsinput{padding:10px;border:1px solid black;width:100%}


/*------------------------------typeahead-------------------*/
/* scaffolding */
/* ----------- */

html {
  overflow-y: scroll;
  *overflow-x: hidden;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */

html {
  font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #292f33;
}


a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p + p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px...

JavaScript

var datas=[{_id:"56a6b050d3a7b8b811324d64",name:"Pippo",age:20,__v:0},{_id:"56af75aa70f5d7500af8cd2f",name:"Joh[n]",age:200,__v:0},{_id:"56af765961e2949410d95663",name:"john",age:200,__v:0},{_id:"56af771bcf85791817c12d55",name:"Genna",age:200,__v:0},{_id:"56b22624a9d411e016ce711a",name:"pippo",age:20,__v:0},{_id:"56b2267ef679c0b417d5a9f9",name:"pippo2",age:20,__v:0}]

var users = new Bloodhound({
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local:datas
    });
    users.initialize();

    $('#tagsinput').tagsinput({
        itemValue: '_id',
        itemText: 'name',
        freeInput: true,
        typeaheadjs: {
            name: 'name',
            displayKey: 'name',
            source: users.ttAdapter()
        }
    });
    
$('#postedBy_add_button').click(function(e){
            //console.log({name:$('#postedBy_add_name').val()});
            var name=$('#postedBy_add_name').val();
            $('#tagsinput').tagsinput('add', {_id:0,name:name});

        });