web-dev-qa-db-fra.com

Comment utiliser Bootstrap Tags Plugin d'entrée

J'essaie d'utiliser Plugin d'entrée de balises Bootstrap sans Typeahead. J'ai inclus les fichiers suivants:

<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="../../tagsinput/js/bootstrap-tagsinput.min.js"></script>

Le script est comme ci-dessous:

<script>
    $('#tagPlaces').tagsinput({
        allowDuplicates: true
    });
</script>

Partie du formulaire JSP où l'utilisation du plugin:

<div class="form-group">
        <label for="tagPlaces" class="col-sm-2 control-label">Tag Places</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" data-role="tagsinput" id="tagPlaces">
        </div>
</div>

Mais je ne peux pas voir les balises dans le champ de saisie. De plus, mon formulaire est envoyé lorsque j'appuie sur Entrée pour la balise. Veuillez suggérer ce qui me manque et quelle est la bonne façon d'utiliser le plugin.

jquerytwitter-bootstrap-3bootstrap-tags-input
8
Aman

C'est comme ça que je l'ai fait

<script src="../js/bootstrap-tagsinput.js"></script>
no more javascript

Css
Vous pouvez inclure l'original bootstrap tags fichier d'entrée css

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

Ou vous ne pouvez utiliser que cela

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: block;
    padding: 4px 6px;
    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 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
}

Et HTML

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">
17
Tonza