Question

大家好，我正在尝试设计一个可以接受多个值的UI输入文本字段，并且我不想按框将它们分开，就像当您在此处提问时添加标签时，每个标签都用“ x”按钮装箱就像删除一样，我也看到了很多类似的设计，但是花了很多时间搜索如何做，却没有看到。希望有人可以提示如何做或我有什么需要做的感谢

Answer 1

<body>Multiple select example
    <div class="selectRow">       
        <select id="mutliSelectItems" data-placeholder="Select City(s)" multiple>
            <option value="1">Lucknow</option>
            <option value="2">Agra</option>
            <option value="3">Shravasti</option>
            <option value="4">Gorakhpur</option>
            <option value="5">Faizabad</option>
        </select>
    </div>
</body>

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

$(document).ready(function () {
   $("#mutliSelectItems").select2();
});

除了上述代码外，请添加以下库

http://code.jquery.com/jquery-1.7.2.js

http://select2.github.io/select2/select2-3.5.1/select2.css

http://select2.github.io/select2/select2-3.5.1/select2.js

我的小提琴： working fiddle link

Answer 2

You can use bootstrap tags-input like

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">


<input type="text" value="html,input,tag" data-role="tagsinput"></input>

<script>
$('input').tagsinput({
  typeahead: {
    source: function(query) {
      return $.getJSON('citynames.json');
    }
  }
});
</script>

HTML / CSS：如何在由框分隔的输入字段中赋值

2 个答案: