Question

我有一个由Bootstrap Tagsinput提供支持的文本输入。目前，此文本输入已使用Typeahead自动填充中使用的单个标记列表进行初始化：

$('.tagsInput').tagsinput({
    maxChars: 25,
    maxTags: 5,
    typeaheadjs: [{
          minLength: 1,
          highlight: true
    },{
        minlength: 1,
        source: new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.whitespace,
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          local: allTags
        })
    }],
    freeInput: true
});

allTags是一个Json数组字符串。

我想要实现的是，不是有一个简单的标签列表，即allTags，我会有某种功能可以访问不同的列表，然后可以选择正确的列表取决于某些元素的值。例如，将有一个下拉列表，根据所选的值，将使用不同的标签列表。 我无法实现这一目标。

我找到了一个解决方法，但基本上，我在我的文本输入元素的类名上播放，并且我在尽可能多的类名上初始化与列表一样多的tagsInput。这有效，但它似乎太过于体操而不是一个干净的实施。

有什么想法吗？

更新这是HTML：

<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required>

select是正常select。

Answer 1

当private void resetResources() { resetMediaPlayer(); resetViewResources(); } private void resetMediaPlayer() { try { if (mediaPlayer != null) { if (mediaPlayer.isPlaying()) mediaPlayer.stop(); mediaPlayer.reset(); } } catch (Exception e) { Logger.caughtException(e); } } private void resetViewResources() { if (oldPosition == -1) return; updateViewAtPosition(false, false); }更改时，您调用一个函数告诉Bloodhound使用哪个数组（或json文件/ url），然后让它重新运行其select函数来更新typeahead建议列表。

HTML：

initialize

使用Javascript：

<h1>Typeahead Test </h1>
<select onchange="changeList(this.value)">
  <option selected value="countries">Countries</option>
  <option value="cities">Cities</option>
</select>

<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="bootstrap-tagsinput.min.js"></script>

这是一个掠夺者：http://plnkr.co/edit/6mjDrgDwqzWeLJQOcA3D?p=preview

以编程方式选择具有Bootstrap tagsinput的Bloodhound自动完成标记列表

1 个答案: