How to have Vue/Vuetify Autocomplete filter on two properties?

Question

Background

So I have a vuetify autocomplete input that I'm using to search a table of parts. The parts table has an identity column, part number column, revision column, description column and a few other columns of information.

I have it working so the autocomplete options show the part number, rev and descriptions while typing in the text field filters the parts by part number.

Problem

But my goal is to be able to filter on both the part number and the description.

I've tried modifying item-text="fpartno" but cannot figure out how to have it work with two or more properties. And most solutions I've found online only affect how the options are displayed not how they are filtered.

Also removing item-text doesn't work either.

Code

I put my autocomplete into Single Page Component. I am currently using Typescript but I will also accept an answer that uses javascript. If I can just use the template syntax that would be ideal.

Note: the property fcomment contains the description in case anyone was confused.

<template>
    <v-container fluid grid-list-xl>
        <v-layout wrap align-center>
            <v-flex xs12 sm6 d-flex>
                <v-autocomplete :items="inmastxs"
                                label="Part #"
                                item-value="identity_column"
                                item-text="fpartno"
                                cache-items
                                :search-input.sync="search"
                                solo>
                    <template slot="selection" slot-scope="data">
                        {{ data.item.fpartno }} - {{ data.item.frev }} ({{ data.item.fcomment }})
                    </template>
                    <template slot="item" slot-scope="data">
                        {{ data.item.fpartno }} - {{ data.item.frev }} ({{ data.item.fcomment }})
                    </template>

                </v-autocomplete>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script lang="ts">

    import Vue from 'vue'
    import { Component, Prop, Watch } from 'vue-property-decorator';
    import { inmastx } from '../../models/M2M/inmastx';
    import axios from 'axios';

    @Component({})
    export default class InMastxSearch extends Vue {
        private search: string = "";
        private PartNumber: string = "";
        private loading: boolean = false;
        private inmastxs: inmastx[] = [];

        @Watch('search')
        onPropertyChanged(value: string, oldValue: string) {
            this.fetchParts(value);
        }


        private mounted() {
            this.fetchParts("");
        }

        private fetchParts(value: string) {
            if (value == null) {
                value = "";
            }

            console.log(value);
            this.loading = true
            axios.get("../odata/inmastx?$orderby=fpartno,frev&$top=10&$filter=contains(fpartno,'" + value + "') or contains(fcomment,'" + value + "')")
                .then((response) => {
                    this.inmastxs = response.data.value;
                    console.log(this.inmastxs);
                })
                .catch(function (error) {
                    console.log(error);
                }).then(() => {
                    this.loading = false;
                });
        }
    }
</script>

If you need anymore details let me know, and thanks in advance.

Answer 1

Take away:

item-text="fpartno"

and use:

no-filter="true"