Vuetify Autocomplete with slots,打字时没有自动完成建议
Vuetify Autocomplete with slots, no autocomplete suggestion when typing
我正在尝试制作一个小工具,有人可以在其中填写一些数据,这可以是名称或 ID,并且该字段会显示一个自动完成列表。 (最终结果将包含 100 多个结果,需要自动完成功能。)
我试过使用 Vuetify 的自动完成功能,但我很难让它正确过滤。
我使用的是 Vuetify 提供的以下代码,没有“编辑”按钮 (https://vuetifyjs.com/en/components/autocompletes#custom-filter-on-autocomplete) - 我能够添加 ID 并在结果中使用作用域插槽显示它。
但是,如果您在输入字段中键入内容,它根本不会显示任何建议。
我已经看了几个小时了,我一定是忽略了什么。我清空了插槽,检查了方法,更改了 ||然后回到他们身边。我暂时没有头绪。
HTML:
<div id="app">
<v-app id="inspire">
<v-card
class="overflow-hidden"
color="blue lighten-1"
dark
>
<v-toolbar
flat
color="blue"
>
<v-icon>mdi-account</v-icon>
<v-toolbar-title class="font-weight-light">Title</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-combobox
:items="states"
:filter="customFilter"
color="white"
label="State"
clearable
>
<template slot="selection" slot-scope="data">
{{ data.item.id }} - {{ data.item.abbr }} {{ data.item.name }}
</template>
<template slot="item" slot-scope="data">
{{ data.item.id }} - {{ data.item.abbr }} {{ data.item.name }}
</template>
</v-combobox>
</v-card-text>
</v-card>
</v-app>
</div>
Vue:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
model: null,
states: [
{ name: 'Florida', abbr: 'FL', id: '1' },
{ name: 'Georgia', abbr: 'GA', id: '2' },
{ name: 'Nebraska', abbr: 'NE', id: '3' },
{ name: 'California', abbr: 'CA', id: '4' },
{ name: 'New York', abbr: 'NY', id: '5' },
],
}
},
methods: {
customFilter (item, queryText, itemText) {
const filterName = item.name.toLowerCase()
const filterAbbr = item.abbr.toLowerCase()
const filterId = item.id.toLowerCase()
const searchText = queryText.toLowerCase()
return
filterName.indexOf(searchText) > -1 ||
filterAbbr.indexOf(searchText) > -1 ||
filterId.indexOf(searchText) > -1
},
},
})
只需在最后一行使用一行 return
就可以了
return filterName.indexOf(searchText) > -1 || filterAbbr.indexOf(searchText) > -1 || filterId.indexOf(searchText) > -1;
或
return (
filterName.indexOf(searchText) > -1 ||
filterAbbr.indexOf(searchText) > -1 ||
filterId.indexOf(searchText) > -1
)
我正在尝试制作一个小工具,有人可以在其中填写一些数据,这可以是名称或 ID,并且该字段会显示一个自动完成列表。 (最终结果将包含 100 多个结果,需要自动完成功能。)
我试过使用 Vuetify 的自动完成功能,但我很难让它正确过滤。 我使用的是 Vuetify 提供的以下代码,没有“编辑”按钮 (https://vuetifyjs.com/en/components/autocompletes#custom-filter-on-autocomplete) - 我能够添加 ID 并在结果中使用作用域插槽显示它。
但是,如果您在输入字段中键入内容,它根本不会显示任何建议。
我已经看了几个小时了,我一定是忽略了什么。我清空了插槽,检查了方法,更改了 ||然后回到他们身边。我暂时没有头绪。
HTML:
<div id="app">
<v-app id="inspire">
<v-card
class="overflow-hidden"
color="blue lighten-1"
dark
>
<v-toolbar
flat
color="blue"
>
<v-icon>mdi-account</v-icon>
<v-toolbar-title class="font-weight-light">Title</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-combobox
:items="states"
:filter="customFilter"
color="white"
label="State"
clearable
>
<template slot="selection" slot-scope="data">
{{ data.item.id }} - {{ data.item.abbr }} {{ data.item.name }}
</template>
<template slot="item" slot-scope="data">
{{ data.item.id }} - {{ data.item.abbr }} {{ data.item.name }}
</template>
</v-combobox>
</v-card-text>
</v-card>
</v-app>
</div>
Vue:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
model: null,
states: [
{ name: 'Florida', abbr: 'FL', id: '1' },
{ name: 'Georgia', abbr: 'GA', id: '2' },
{ name: 'Nebraska', abbr: 'NE', id: '3' },
{ name: 'California', abbr: 'CA', id: '4' },
{ name: 'New York', abbr: 'NY', id: '5' },
],
}
},
methods: {
customFilter (item, queryText, itemText) {
const filterName = item.name.toLowerCase()
const filterAbbr = item.abbr.toLowerCase()
const filterId = item.id.toLowerCase()
const searchText = queryText.toLowerCase()
return
filterName.indexOf(searchText) > -1 ||
filterAbbr.indexOf(searchText) > -1 ||
filterId.indexOf(searchText) > -1
},
},
})
只需在最后一行使用一行 return
就可以了
return filterName.indexOf(searchText) > -1 || filterAbbr.indexOf(searchText) > -1 || filterId.indexOf(searchText) > -1;
或
return (
filterName.indexOf(searchText) > -1 ||
filterAbbr.indexOf(searchText) > -1 ||
filterId.indexOf(searchText) > -1
)