我正在为项目使用vuetify。但我对自动完成或组合框之类的搜索选项有疑问。我需要构建一个搜索功能,在其中可以使用名称列中的“名称”或联系人列中的“联系人/电话号码”从数据库表中进行搜索。但是我遇到一个问题,我可以使用任何一个联系人的姓名进行搜索。当我放入:item-text =“ Name”时,它会从名称列中搜索。
<v-combobox
v-model="searchPatients.searchInput"
:items="searchFilter"
:search-input.sync="searchPatient"
item-text="name"
item-value="name"
item-disabled
hint="Search by Contact Number"
label="Search Old Patient"
prepend-inner-icon="search"
outline
open-on-clear
>
<template v-slot:item="data">
<v-list-tile-content >
<v-list-tile-title v-html="data.item.name"></v-list-tile-title>
<v-list-tile-sub-title v-html="'Contact: ' +data.item.contact +', Age: '+ data.item.age"></v-list-tile-sub-title>
</v-list-tile-content>
<v-btn small fab dark color="cyan darken-2" slot="activator" @click="addOldPatientSchedule(data.item)">
<v-icon>add</v-icon>
</v-btn>
</template>
</v-combobox>
但是当我放入:item-text =“ contact”时,它会从联系人列中搜索。
<v-combobox
v-model="searchPatients.searchInput"
:items="searchFilter"
:search-input.sync="searchPatient"
item-text="contact"
item-value="name"
item-disabled
hint="Search by Contact Number"
label="Search Old Patient"
prepend-inner-icon="search"
outline
open-on-clear
>
<template v-slot:item="data">
<v-list-tile-content >
<v-list-tile-title v-html="data.item.name"></v-list-tile-title>
<v-list-tile-sub-title v-html="'Contact: ' +data.item.contact +', Age: '+ data.item.age"></v-list-tile-sub-title>
</v-list-tile-content>
<v-btn small fab dark color="cyan darken-2" slot="activator" @click="addOldPatientSchedule(data.item)">
<v-icon>add</v-icon>
</v-btn>
</template>
</v-combobox>
下面给出我的搜索逻辑
searchFilter(){
return this.patientInfo.filter((getPatient) => {
return (getPatient.name.toLowerCase().match(this.searchPatient) || getPatient.contact.match(this.searchPatient))
});
}
数据库查询
$filteredPatients = Patient::where('name','like',"%$patients%")
->orWhere('contact','like',"%$patients%")
->take(10)->get();