在 v-text-field 或 v-textarea vuetify 中显示实时建议词 Vue.js

Question

我想知道是否可以实现在 vuetify 中输入 v-text-field 或 v-textarea 时显示建议词的功能。大多数文章解释了如何使用 Vuetify

中的 v-autocomplete 组件

我的想法是继续显示每个正在键入的单词的列表，如果用户 select 从列表中选择一个选项，则该单词将添加到现有字符串中。

例如：

<v-autocomplete
  label="Description"
  :items="[one, two, three]"
></v-autocomplete>

我每次在 v-autocomplete 提供的文本字段中键入一个词时是否可以显示这些项目？

Answer 1

你可以像这样拼凑起来

<textarea v-model="textAreaModel" placeholder="add multiple lines"></textarea>
<v-autocomplete
  v-model="autocompleteModel"
  label="Description"
  :items="[one, two, three]"
></v-autocomplete>

你在哪里手动

watch: {
  autoCompleteModel() {
    this.textAreaModel = this.textAreaModel + this.autoCompleteModel;
  }

然后使用 css 将自动完成浮动在文本区域上。

不确定 vuetify 的自动完成是否公开了更改侦听器或 select 方法用于 selected 项目。如果是这样，您可以放弃手表，转而采用一种方法。您可以找到一个从 vuetify 的示例中派生出来的代码笔，其中 watch on model working here.

Answer 2

解决方案

我最终使用了 vue-codemirror 这个功能。

首先在main.js

注册

    import CodeMirror from 'vue-codemirror'
    import CodeMirrorJS from 'codemirror/lib/codemirror.js';
    import 'codemirror/lib/codemirror.css';
    import 'codemirror/addon/hint/show-hint.css';
    import 'codemirror/addon/hint/show-hint';
    import 'codemirror/addon/hint/anyword-hint';
    Vue.use(CodeMirror);
    
    CodeMirrorJS.registerHelper("hint", "medication", function(cm, options) {
        var cur = cm.getCursor(), token = cm.getTokenAt(cur);
        var start = token.start, end = token.end;
        return {
            list: [],
            from: CodeMirrorJS.Pos(cur.line, start),
            to: CodeMirrorJS.Pos(cur.line, end)
        }
    });
    window.CodeMirror = CodeMirrorJS;

然后在所需文件中填充列表，如下所示：

populateAutocompletedMedication(){
    firestore.collection("words").doc("medication")
    .get().then(snap => {
        var words = snap.data().list;
        CodeMirror.hint.medication = function (editor) {
            var list = words|| [];
            var cursor = editor.getCursor();
            var currentLine = editor.getLine(cursor.line);
            var start = cursor.ch;
            var end = start;
            while (end < currentLine.length && /[\w$]+/.test(currentLine.charAt(end))) ++end;
            while (start && /[\w$]+/.test(currentLine.charAt(start - 1))) --start;
            var curWord = start != end && currentLine.slice(start, end);
            var regex = new RegExp('^' + curWord, 'i');
            var result = {
                list: (!curWord ? list : list.filter(function (item) {
                    return item.match(regex);
                })).sort(),
                from: CodeMirror.Pos(cursor.line, start),
                to: CodeMirror.Pos(cursor.line, end)
            };

            return result;
        };
    });
}

并在 front-end 上使用如下：

<codemirror 
    ref="medicationRef" 
    class="codemirror-custom" 
    v-model="=medication" 
    :options="codeMirrorOptions"  
    @ready="onCmMedicationReady" 
></codemirror>

在数据中：

codeMirrorOptions: {
  mode: 'string',
  lineNumbers: false,
  line: true,
}

在方法中：

onCmMedicationReady(cm) {
    cm.on('keypress', () => {
        CodeMirror.showHint(cm,CodeMirror.hint.medication,{completeSingle:false});
    });
}

这可能不是常规方法，但它确实有效...

在 v-text-field 或 v-textarea vuetify 中显示实时建议词 Vue.js

Display live suggestion words in v-text-field or v-textarea vuetify Vue.js

javascript

autocomplete

vue.js

vuetify.js