Как включить tagsinput?

Перед использованием tagsinput, подключить

CSS:

css/bootstrap.min.css
css/bootstrap-theme.min.css
css/bootstrap-tagsinput.css 

JS:

https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
js/bootstrap.min.js
js/typeahead.bundle.js
js/bootstrap-tagsinput.js
js/load-tags.js

load-tags.js выглядит, примерно, так:

function loadTags(input, min_length)
{
    var url_ = $(input).attr('data-url');

    var itemsList = new Bloodhound({
        datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.name);
        },
        remote: {
            url: url_ + '&keywords=%QUERY',
            wildcard: '%QUERY',
            filter: function (data) {
                return $.map(data, function (data) {
                    return data;
                });
            }
        }
    });

    itemsList.initialize();

    var elt = $(input);

    elt.tagsinput (
        {    itemValue  : function(item) {  return item.id    ;  }
             , itemText : function(item) {  return item.title ;  }
             , typeaheadjs: {
                 limit: 5000
                 , display: 'title'
                 , source: itemsList.ttAdapter()
             }
             , min_length
             , tagClass: function(item) { return 'label label-default'; }
        }
    );

    return elt;
}

bootstrap-tagsinput.js изменяется так, чтобы строка

self.$input.typeahead({minLength: self.options.min_length, highlight: true}, typeaheadjs).on('typeahead:selected', $.proxy(function (obj, datum)

содержала опцию minLength: self.options.min_length, или взять из работающего примера.

Для включения tagsinput для справочника, указать "Визуализация - форма" = tagsinput .

Для изменения стиля тэга, использовать классы label, label-default из loadTags по примеру того, какие по умолчанию, изменив нужный css параметр, например:

 .bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    cursor: text;
    display: inline-block;
    line-height: 22px;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 2px 6px 4px;
    vertical-align: middle;
}

.label {
    border-radius: 0.25em;
    color: #fff;
    display: inline;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    padding: 0.2em 0.6em 0.3em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.label-default {
    background-color: #337ab7;
}

Для выпадающего typeahead меню можно использовать такие стили:

.tt-menu,
.gist {
    text-align: left;
}
.sub_item{
    display: none;
    padding-left: 25px !important;
}

.typeahead,
.tt-query,
.tt-hint {
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    outline: none;
}

.typeahead {
    background-color: #fff;
}

.typeahead:focus {
    border: 1px 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 {
    margin: 10px 0;
    padding: 0px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
/*
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
*/
    -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 rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 15px;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

.gist {
    font-size: 14px;
}

#custom-templates .empty-message {
    padding: 5px 10px;
    text-align: center;
}

#multiple-datasets .league-name {
    margin: 0 20px 5px 20px;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
    max-height: 150px;
    overflow-y: auto;
}

#rtl-support .tt-menu {
    text-align: right;
}
.tt-menu {
    min-width: 200px;
    max-height: 150px;
    overflow-y: auto;
}
.twitter-typeahead{
    vertical-align: middle;
}