Cacher is the code snippet organizer for pro developers

FIRST YOU WILL need to add JS and CSS

<link rel="stylesheet" href="bootstrap-tagsinput.css">
<link rel="stylesheet" href="app.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<script src="/admin/plugins/tagmoderni/bootstrap-tagsinput.min.js"></script>

   
    /* =========  TAGOVI  POCETAK ================ */

    $('#tagdodaj').on('change', function (event) {

        var $element = $(event.target);

        if (!$element.data('tagsinput'))
            return;


        var val = $element.val();
        var errtt = $element.tagsinput();
        var ite = $element.tagsinput('items');
        var ed = $element.data('tagsinput');

       /* console.log(+val);
        console.log(errtt);
        console.log(ite);
        console.log(ed);*/

        if (val === null)
            val = "null";

        // put in div tag to see result
        $('#idtagova').val(($.isArray(val) ? JSON.stringify(val) : "\"" + val.replace('"', '\\"') + "\""));

    }).trigger('change');

    // Examples : http://twitter.github.io/typeahead.js/examples/
    var cities = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,

        prefetch: {
            // if you want to remove local storage go to console (developer FireFox) and type => localStorage.clear
            url : '/admin/plugins/tagmoderni/cities.json'
            /*
             /* 
                [ { "value": 221 , "text": "Amsterdam"   , "continent": "Europe"    },
                  { "value": 2215, "text": "Kinshasa"    , "continent": "Africa"    }
                ]
            */
            */
           // cache : false // default is true
        },
        remote: {
            /*
            url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d',
            we can use this link but we neet to set  return => $.map(cities, $.map(cities.results, function (movie) because of JSON
            */
            url: '/akcija.php?action=listaTagova&query=%QUERY',
            // return is in file cities.json same as listaTagova => same return
            filter: function (cities) {
                return $.map(cities, function (movie) {
                    return {
                        text: movie.text,
                        value: movie.value,
                        continent: movie.continent
                    };
                });
            }
        }
    });
    cities.initialize();

    var elt = $('#tagdodaj');
    elt.tagsinput({
        tagClass: function (item) {

            console.log(item.continent);

            switch (item.continent) {
                case 'Europe' :
                    return 'label label-primary';
                case 'Adssa' :
                    return 'label label-danger label-important';
                case "osnovni":
                    return 'label label-success';
                case 'Africa' :
                    return 'label label-default';
                case 'Asia' :
                    return 'label label-warning';
                default:
                    return 'label label-primary';
            }
        },
        itemValue: 'value',
        itemText: 'text',
        typeaheadjs: {
            name: 'cities',
            displayKey: 'text',
            source: cities.ttAdapter()

        }
    });

    // get json strin from id that php is genarated
    // <input id="jsonTag" value="[{&quot;TagoviId&quot;:3,&quot;TagoviIme&quot;:&quot;Kola s\u0027tockovima&quot;,&quot;osnovni&quot;:&quot;osnovni&quot;}]" type="hidden">
    var jsonOsnovni =  $('#jsonTag').val();

    // convert string to JSON
    var json = JSON.parse(jsonOsnovni);

    // EACH put default
    $.each(json, function(i, item) {
        elt.tagsinput('add', {"value": item.TagoviId, "text": item.TagoviIme, "continent": item.osnovni });
    });

    /* =========  TAGOVI  END ================ */

.icon-github {
    background: no-repeat url('../img/github-16px.png');
    width: 16px;
    height: 16px;
}

.bootstrap-tagsinput { width: 100%; }

.accordion {
	margin-bottom:-3px;
}

.accordion-group { 
	border: none;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.twitter-typeahead .tt-hint
{
    display: none;
}

.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
.tt-suggestion > p {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
}
.tt-suggestion > p:hover,
.tt-suggestion > p:focus,
.tt-suggestion.tt-cursor p {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

[ { "value": 221 , "text": "Amsterdam"   , "continent": "Europe"    },
  { "value": 222 , "text": "London"      , "continent": "Europe"    },
  { "value": 223 , "text": "Paris"       , "continent": "Europe"    },
  { "value": 224 , "text": "Washington 224"  , "continent": "America"   },
  { "value": 225 , "text": "Mexico City" , "continent": "America"   },
  { "value": 226 , "text": "Buenos Aires", "continent": "America"   },
  { "value": 227 , "text": "Sydney"      , "continent": "Australia" },
  { "value": 228 , "text": "Wellington"  , "continent": "Australia" },
  { "value": 229 , "text": "Canberra"    , "continent": "Australia" },
  { "value": 2210, "text": "Beijing"     , "continent": "Asia"      },
  { "value": 2211, "text": "New Delhi"   , "continent": "Asia"      },
  { "value": 2212, "text": "Kathmandu"   , "continent": "Asia"      },
  { "value": 2213, "text": "Cairo"       , "continent": "Africa"    },
  { "value": 2214, "text": "Cape Town"   , "continent": "Africa"    },
  { "value": 2215, "text": "Kinshasa"    , "continent": "Africa"    }
]