我想知道是否可以在 vuetify 中输入 v-text-field 或 v-textarea 时实现显示建议词的功能。大多数文章解释使用来自Vuetify 的v-autocomplete 组件
我的想法是在输入的每个单词上继续显示列表，如果用户从列表中选择一个选项，则该单词将添加到现有字符串中。
例如：
<v-autocomplete
label="Description"
:items="[one, two, three]"
></v-autocomplete>
每次我在v-autocomplete提供的文本字段中输入一个单词时，是否可以显示这些项目？
【问题讨论】：
标签： javascript vue.js autocomplete vuetify.js
解决方案
我最终为这个功能使用了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;
};
});
}
并在前端使用如下：
<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});
});
}
这可能不是传统的方法，但它确实有效......
【讨论】：
你可以像这样拼凑起来
<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 将自动完成功能浮动到 textarea 上。
不确定 vuetify 的自动完成功能是否会在选择项目时公开更改侦听器或选择方法。如果是这样，您可以放弃手表以支持一种方法。您可以找到一个从 vuetify 的示例中派生出来的代码笔，其中手表模型工作 here。
【讨论】：