如何使用v-autocomplete或v-combobox之类的vuetify组件从数据库表的两列搜索

时间:2019-07-10 08:05:28

标签: laravel vue.js

我正在为项目使用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();

0 个答案:

没有答案