如何从“标签输入”创建数组？

Question

我正在处理表单，并且想基于来自“标签输入”的数组创建过滤器。

使用一些前端框架，我已经获得了一个使用以下代码显示标签的输入：

<form action="/tags" method="POST">
    <div class="form-group">
      <label class="form-label">Tags</label>
      <input class="form-control" type="text"  data-role="tagsinput" ></input>
    </div>
    <button type="submit">Enviar</button>
</form>

我还必须在HTML中包含哪些其他属性，以及它在JS代码方面如何工作？我希望将每个“标签”存储为某个变量上的数组元素。

Answer 1

如果您使用的是jQuery标签输入插件，则可以使用

$("#tagsinput").val()

这将返回一个字符串，每个值都用逗号分隔。例如：-hello,tag2

要从中获取数组，可以调用字符串拆分函数。

const valuesArray = $("#tagsinput").val().split(",");

您的html看起来像

<form id="tagsform" action="/tags" method="POST">
        <input
          id="tagsinput"
          type="text"
          value="Amsterdam,Washington,Sydney,Beijing,Cairo"
          data-role="tagsinput"
          placeholder="Add tags"
        />
        <button type="submit">Enviar</button>
        <div id="array"></div>
      </form>

JS看起来像

 <script type="text/javascript">
      $("#tagsform").on("submit", e => {
        e.preventDefault();
        const valuesArray = $("#tagsinput").val().split(",");
        $("#array").html(JSON.stringify(valuesArray));
        console.log(values);
      });
    </script>

有关完整代码，请参见下面的SO摘录，然后单击“运行”以查看其运行情况。

$("#tagsform").on("submit", (e) => {
  e.preventDefault();
  const values = $("#tagsinput").val().split(",");
  $("#array").html(JSON.stringify(values));
  console.log(values);
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" crossorigin="anonymous" />

<!-- JQuery and tagsinput plugin -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div style="width: 70%; margin: auto;">
  <form id="tagsform" action="/tags" method="POST">
    <input id="tagsinput" type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" placeholder="Add tags" />
    <button type="submit">Enviar</button>
    <div id="array"></div>
  </form>
</div>