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

Question

I would like to know if it possible to implement a feature to display suggestion words while typing in a v-text-field or v-textarea in vuetify. Most articles explain using a v-autocomplete component from Vuetify

My idea was to keep displaying the list on each word being typed and if the user select an option from the list, the word is added to the existing string.

For example:

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

Will it be possible to display the items each time I type a word in the text field provided in the v-autocomplete ?

Answer 1

SOLUTION

I ended up using vue-codemirror for this feature.

First registering in 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;

Then populating the list in required files as follows:

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;
        };
    });
}

And use as follows on front-end:

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

in data:

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

in methods:

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

This may not be the conventional way to do it, but it works...

Answer 2

You could piece that together like

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

where you manually

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

and then use css to float the autocomplete over the textarea.

Not sure if vuetify's autocomplete exposes a change listener or select method for when an item is selected. If so you could ditch the watch in favor of a method. You can find a codepen forked from one of vuetify's examples with the watch on model working here .