在Bootstrap 4中使用Typeahead添加多个值

在Bootstrap 4中，Typeahead是一个非常方便的插件，它可以帮助用户快速输入并选择相关的内容。在本文中，我们将讨论如何使用Typeahead添加多个值。

准备工作

在开始之前，我们需要进行一些准备工作。首先，我们需要确保在我们的项目中包含了Bootstrap和Typeahead的相关文件。可以通过CDN或本地文件来引用这些文件。其次，我们需要在html文件中创建一个输入框和一个存储所选值的隐藏字段：

<div class="form-group row">
  <label for="typeahead-input" class="col-sm-2 col-form-label">添加多个值:</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="typeahead-input" name="typeahead-input">
    <input type="hidden" id="hidden-field" name="hidden-field">
  </div>
</div>

初始化Typeahead

完成上述准备工作之后，我们需要将Typeahead绑定到输入框上。在初始化Typeahead之前，我们需要定义一个包含所有可能选项的JavaScript数组。

var availableOptions = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];

然后我们可以使用以下代码将Typeahead绑定到输入框上：

$('#typeahead-input').typeahead({
  source: availableOptions,
  updater: function(item) {
    var current = $('#hidden-field').val();
    if(current == '') {
      $('#hidden-field').val(item);
    } else {
      var new_val = current + ',' + item;
      $('#hidden-field').val(new_val);
    }
    return item;
  }
});

在这段代码中，我们使用source指定Typeahead的可选项。我们还定义了一个updater函数，以便在用户选择一个选项时更新隐藏字段的值。这个函数将在用户选择选项时被调用，并返回所选项的值。

在updater函数中，我们首先获取当前隐藏项的值。如果它是空的，我们将所选项的值复制到隐藏字段中。否则，我们将新的值添加到当前值的末尾，以逗号分隔的形式，并将结果更新到隐藏字段中。

显示所选值

一旦用户选择了选项，我们需要将所选项的值显示在页面上。这可以通过以下代码完成：

$('#hidden-field').change(function(){
  var selectedValues = $('#hidden-field').val();
  var selectedValuesArray = selectedValues.split(",");
  var displayedValue = selectedValuesArray.join(", ");
  $('#typeahead-input').val(displayedValue);
});

在这段代码中，我们使用change事件监听隐藏字段的变化。一旦字段的值发生变化，我们分离逗号分隔的值并将它们连接在一起，用空格隔开。最后，我们将这个字符串设置为输入框的值。

完整代码

上述代码片段可以结合起来形成完整的代码：

<div class="form-group row">
  <label for="typeahead-input" class="col-sm-2 col-form-label">添加多个值:</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="typeahead-input" name="typeahead-input">
    <input type="hidden" id="hidden-field" name="hidden-field">
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.3.1/typeahead.jquery.min.js"></script>

<script>
var availableOptions = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];

$('#typeahead-input').typeahead({
  source: availableOptions,
  updater: function(item) {
    var current = $('#hidden-field').val();
    if(current == '') {
      $('#hidden-field').val(item);
    } else {
      var new_val = current + ',' + item;
      $('#hidden-field').val(new_val);
    }
    return item;
  }
});

$('#hidden-field').change(function(){
  var selectedValues = $('#hidden-field').val();
  var selectedValuesArray = selectedValues.split(",");
  var displayedValue = selectedValuesArray.join(", ");
  $('#typeahead-input').val(displayedValue);
});
</script>

总结

在Bootstrap 4中使用Typeahead添加多个值可以帮助用户快速输入和选择相关的内容。通过这篇文章，我们学习了如何初始化Typeahead并更新一个隐藏字段来存储所选项的值。我们还学习了如何使用change事件将所选值显示在输入框中。希望这篇文章能够帮助您在使用Typeahead时更加方便快捷。