Vuejs - 在用户数字时显示自动完成建议

Question

我有这个js fiddle code。我想使用 vuejs 创建一个建议自动完成功能。目前我只完成了部分范围，我对这些建议有疑问。它们将被放置在用户输入字符下，这并不完全是我所期望的，我想做一些类似于智能手机键盘的自动完成的事情，在用户输入单词时将显示建议的单词。谁能帮帮我？

<div id="app">
  <textarea id="input" v-model="input" @input="predictWord()"></textarea>
  <span id="suggestion" ref="suggestion"></span>
</div>

#app {
  .input {
    position: relative;
  }
  #suggestion {
    position: absolute;
    left: 0;
  }
}

Vue 原型代码

new Vue({
  el: "#app",
  data() {
    return {
        input: null,
      t9: null,
      words: []
    }
  },
  mounted() {
        this.init();
  },
    methods: {
    init() {
        axios({
        method: 'GET',
        url: 'https://raw.githubusercontent.com/napolux/paroleitaliane/master/paroleitaliane/660000_parole_italiane.txt'
      }).then( (res) => {
            this.words = res.data.split('\n'); 
            this.t9 = Predictionary.instance();
            this.t9.addWords(this.words);
      });   
    },
    predictWord() {
        let suggestion;
        this.countChars();
      suggestion = this.t9.predict(this.input);
      this.$refs.suggestion.innerText = suggestion[0];
    },
        countChars() {
        console.log(this.input.length);
    }
  }
});

Answer 1

我创建了一个工作的 sn-p：稍微简化了它，添加了一个加载状态（因为字典很大），更新了结果输出，所以它不依赖于任何 DOM 元素。

new Vue({
  el: "#app",
  data() {
    return {
      loading: false,
      input: null,
      t9: null,
      suggestion: [],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.loading = true
      try {
        const {
          data = ''
        } = await axios({
          method: 'GET',
          url: 'https://raw.githubusercontent.com/napolux/paroleitaliane/master/paroleitaliane/660000_parole_italiane.txt'
        })
        this.t9 = Predictionary.instance();
        const a = data.split('\n').filter(e => e)
        this.t9.addWords(a)
      } catch (err) {
        console.error(err)
      } finally {
        this.loading = false
      }
    },
    predictWord: _.debounce(function() {
      this.suggestion = this.input ? this.t9.predict(this.input) : [];
    }, 300),
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="https://unpkg.com/predictionary/dist/predictionary.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<div id="app">
  <textarea id="input" v-model="input" @input="predictWord" :disabled="loading"></textarea><br />
  <span id="suggestion">{{ suggestion.join(', ') }}</span>
</div>

还添加了debounce 函数，因此预测不必运行这么多次 - 300 毫秒是我的经验中合理的延迟。