typeahead-callback doesn't show autocomplete prompts

[Creling]

I use "@voerro/vue-tagsinput": "^2.7.1" in my "vue": "^2.6.11" proj to find that typeahead-callback doesn't show autocomplete prompts.

Some code snippets are as follows:

<el-col :span="20" style="margin: auto">
  <tags-input
    element-id="tags"
    v-model="selectedTags"
    :existing-tags="existingTags"
    :typeahead="true"
    :typeahead-callback="search_tags"
    @tag-added="on_tag_added"
    @tag-removed="on_tag_removed"
    :add-tags-on-comma="true"
    :delete-on-backspace="true"
    typeahead-style="badges"
    value-fields="value"
  ></tags-input>
</el-col>

search_tags(query) {
  console.log(query);
  return new Promise((resolve) => {
    this.$axios
      .get( ... )
      .then((res) => {
        let result = [];
        for (let key in res.data) {
          result.push({ key: key, value: res.data[key] });
        }
        console.log(result);
        resolve(result);
      });
  });
},

I notice that console.log(result); prints correct results but no autocomplete prompts are shown.

Any help is appreciated :)

Creling

[elmage]

I have the same problem.
Looking for an alternative package now.

[peinkofer]

I had the same problem. In VoerrorTagsInput.vue,

if (this.typeaheadCallback) { this.typeaheadCallback(searchQuery) .then((results) => { this.typeaheadTags = results; }); }

has to be changed to this:

if (this.typeaheadCallback) { this.typeaheadCallback(searchQuery) .then((results) => { this.typeaheadTags = results; this.doSearch(searchQuery); }); }

Then it works for me. And seems there is already a PR open for this: https://github.com/voerro/vue-tagsinput/pull/147/commits

[hodbn]

As another workaround until the PR is merged, you can add a ref to the components (e.g. ref="tagsinput") and then call doSearch after resolving the promise.

autocomplete(q) {
  const p = this.searchRemoteServer({ query: q })
  return new Promise((resolve) => {
    p.then((results) => {
      resolve(results)
      this.$refs.tagsinput.doSearch(q)
    })
  })
},