Question

我正在尝试在Vue组件中使用Twitter的typeahead.js，但是虽然我已将其设置为在任何Vue组件外部进行了测试，但在组件中使用时，不会出现任何建议，也不会写入任何错误控制台。它就好像它不存在一样。这是我的先行设置代码：

         var codes = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('code'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: contextPath + "/product/codes"
        });
        $('.typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 3
          },
          {
            name: 'codes',
            display: 'code',
            source: codes,
            templates: {
              suggestion: (data)=> {
                return '<div><strong>' + data.code + '</strong> - ' + data.name + '</div>';
              }
            }
          });

我使用此表单输入：

<form>
<input id="item" ref="ttinput" autocomplete="off" placeholder="Enter code"     name="item" type="text" class="typeahead"/>
</form>

如上所述，如果我将此移动到Vue.js控件之外的div，并将Javascript放在文档就绪块中，它可以正常工作，只要输入3个字符，就会出现格式正确的建议集。领域。但是，如果我把Javascript放在组件的mounted（）中（或者在手表中，我已经尝试了两种），没有预先输入功能（即输入3个字符后没有任何反应），尽管Bloodhound进行预取调用。对于我的生活，我看不出有什么区别。

任何关于在哪里观看的建议都将受到赞赏。

Answer 1

稍后：我已经设法通过将更改初始化代码放入更新的事件（而不是挂载或观看）来使其显示。一直存在一些问题，即DOM没有处于正确的状态。我有一些格式问题，但至少我现在可以继续。

Answer 2

用于初始化Twitter Typeahead / Bloodhound的正确位置位于 mounted() 挂钩中，因为那是当DOM完全构建时。（Ref）

在相关代码段下方找到：（来源：https://digitalfortress.tech/js/using-twitter-typeahead-with-vuejs/）

mounted() {
  // configure datasource for the suggestions (i.e. Bloodhound)
  this.suggestions = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      identify: function(item) {
          return item.id;
      },
      remote: {
          url: http://example.com/search + '/%QUERY',
          wildcard: '%QUERY'
      }
  });
  // get the input element and init typeahead on it
  let inputEl = $('.globalSearchInput input');   
  inputEl.typeahead(
      {
          minLength: 1,
          highlight: true,
      },
      {
          name: 'suggestions',
          source: this.suggestions,
          limit: 5,
          display: function(item) {
              return item.title
          },
          templates: {
              suggestion: (data) => {
                    return `<div class="ss-suggestion">
                                <a class="tr_link" data-type="singleTrack" href="${data.slug}">
                                    <div class="sr_title">${data.title}</div>
                                </a>
                            </div>`;
              }
          }
      }
    );
  }

您还可以找到一个有效的示例：https://gospelmusic.io/ 和 Reference Tutorial 以将Twitter预输入与您的VueJS应用集成。

Twitter typeahead.js无法在Vue组件

2 个答案: