hen*_*dry 7 html autocomplete datalist vue.js
我希望创建一个输入字段，该字段提供有关完成的建议，例如 VScode“Intellisense”（我认为）或dmenu所做的。
我一直在使用 Vue JS 和如下代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Lookup German word:
<input type="text" v-model.trim="word" v-on:keyup="signalChange" v-on:change="signalChange" list="words" autofocus>
</label>
<datalist id="words">
<option v-for="w in words">${w}</option>
</datalist>
Query: ${query} Results: ${words.length} Time taken: ${fetchtime} ms
</div>
<script>
const app = new Vue({
el:'#app',
delimiters: ['${', '}'],
data() {
return {
listId:'words',
word:'',
query:'',
words:[],
fetchtime: 0
}
},
methods: {
async signalChange(){
console.log(this.word)
if (this.word.length > 2 && this.word.slice(0,3).toLowerCase() != this.query) {
this.query = this.word.slice(0,3).toLowerCase()
let time1 = performance.now()
let response = await fetch('https://dfts.dabase.com/?q=' + this.query)
const words = await response.json()
let time2 = performance.now()
this.fetchtime = time2 - time1
this.listId="";
this.words = words
setTimeout(()=>this.listId="words");
}
}
}
})
</script>哪里signalChange会获取一些完成结果。
然而，用户体验 (UX) 是不直观的。键入三个字符（如“for”）后，您必须退格才能看到补全。我尝试了几个浏览器，但 VueJS 的体验很差。但是它在没有 VueJS 的情况下工作正常。
有什么我想念的吗？演示：https : //dfts.dabase.com/
也许我需要在 VueJS 中创建自己的下拉 HTML，就像在https://dl.dabase.com/?polyfill=true 中发生的那样？
此处报告了 Chrome 上的性能问题：这是与输入 + 数据列表相关的 Chrome UI 性能错误吗？
将解决方案应用于您的 Vue 代码对于 Chrome 来说效果很好：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Lookup German word:
<input type="text" v-model.trim="word" v-on:keyup="signalChange" v-on:change="signalChange" list="words" autofocus>
</label>
<datalist v-bind:id="listId">
<option v-for="w in words">${w}</option>
</datalist>
Query: ${query} Results: ${words.length} Time taken: ${fetchtime} ms
</div>
<script>
const app = new Vue({
el:'#app',
delimiters: ['${', '}'],
data() {
return {
listId:'words',
word:'',
query:'',
words:[],
fetchtime: 0
}
},
methods: {
async signalChange(){
console.log(this.word)
if (this.word.length > 2 && this.word.slice(0,3).toLowerCase() != this.query) {
this.query = this.word.slice(0,3).toLowerCase()
let time1 = performance.now()
let response = await fetch('https://dfts.dabase.com/?q=' + this.query)
const words = await response.json()
let time2 = performance.now()
this.fetchtime = time2 - time1
this.listId="";
this.words = words
setTimeout(()=>this.listId="words");
}
}
}
})
</script>Firefox 仍然无法正常工作，所以请参阅下面我的原始答案：
我注意到运行代码时有很大的滞后，所以我开始摆弄一下，问题似乎是为大量项目生成数据列表选项。
由于无论如何您都只会显示一些结果，因此可以做的就是限制渲染选项的数量，然后在添加更多字符时使用过滤器显示更多结果。
这在 Chrome 上运行良好，但在 Firefox 上仍然失败（尽管 Firefox 中存在一个已知问题： https: //bugzilla.mozilla.org/show_bug.cgi?id =1474137 ）
一探究竟：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Lookup German word:
<input type="text" v-model="word" v-on:keyup="signalChange" list="words" autofocus>
</label>
<datalist id="words">
<option v-for="w in words">${w}</option>
</datalist> Query: ${query} Results: ${fetchedWords.length} Time taken: ${fetchtime} ms
</div>
<script>
new Vue({
el: '#app',
delimiters: ['${', '}'],
data() {
return {
word: '',
query: '',
words: [],
fetchedWords: [],
fetchtime: 0
}
},
methods: {
async signalChange() {
if (this.word.length > 2 && this.word.slice(0, 3).toLowerCase() != this.query) {
this.query = this.word.slice(0, 3).toLowerCase();
let response = await fetch('https://dfts.dabase.com/?q=' + this.query);
this.fetchedWords = (await response.json());
this.words = this.fetchedWords.slice(0, 10);
} else if (this.word.includes(this.query)) {
this.words = this.fetchedWords.filter(w => w.startsWith(this.word)).slice(0, 10);
} else {
this.words = [];
}
}
}
})
</script>我用纯 JS+HTML 创建了一个等效的实现。使用一种高性能的方法来最小化 DOM 创建时间（创建一个片段并仅将其附加到 DOM 一次，按照如何从字典填充大型数据列表（~2000 个项目）），但仍然需要很长时间才能响应。一旦完成，它就可以很好地工作，但在我的机器上，输入“was”后花了几乎一分钟的时间才变得有响应。
下面是纯JS+HTML的实现：
let word = '';
let query = '';
const input = document.querySelector('input');
const combo = document.getElementById('words');
input.onkeyup = function signalChange(e) {
word = e.target.value;
console.log(word)
if (word.length > 2 && word.slice(0, 3).toLowerCase() != query) {
query = word.slice(0, 3).toLowerCase();
fetch('https://dfts.dabase.com/?q=' + query)
.then(response => response.json())
.then(words => {
const frag = document.createDocumentFragment();
words.forEach(w => {
var option = document.createElement("OPTION");
option.textContent = w;
option.value = w;
frag.appendChild(option);
})
combo.appendChild(frag);
});
}
}<div id="app">
<label>Lookup German word:
<input type="text" list="words" autofocus>
</label>
<datalist id="words"></datalist>
</div>因此，考虑到这一点以及由于错误而导致的 Firefox 经验有限，您应该在没有数据列表的情况下实现自定义自动完成。
为了获得良好的性能，如果列表非常大，您可能希望将整个列表保留在 DOM 之外，并在用户更改输入或在列表中滚动时更新它。
以下是使用 OP 示例中的 API 的现有自定义自动完成示例： https: //jsfiddle.net/ywrvhLa8/4/