Wants to highlight only chars the user types in the input v-autocomplete

Question

I have made a v-autocomplete but it highlights words/chars in the list that the user haven't typed.

the v-autocomplete code:

<v-autocomplete
  :filter="() => true"
  item-text="states.text"
  :items="states"
  filled
  rounded
  v-model="model"
  :search-input.sync="search">
    <template
      slot="item"
      slot-scope="{ parent,item }"
            >
            <v-list-tile-content  >
              <v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`"> 
              </v-list-tile-title>
           </v-list-tile-content>
    </template>
</v-autocomplete>

You can se it all in the codepen: https://codepen.io/maikenmadsen92/pen/ZEEZjYM?editors=1010

Is it possible just to highlight the words the user have typed in the input?

Answer 1

There are some issue with the implementation of you v-autocomplete. You filter is useless since it will alway return true with is why all words/chars is highlights. And the main issue is you item-text since following the doc vuetify

item-text :
Set property of items's text value

With mean you item-text=text since the items is already set to states.

<v-autocomplete
  item-text="text"
  :items="states"
  filled
  rounded
  v-model="model"
  :search-input.sync="search">
    <template
      slot="item"
      slot-scope="{ parent,item }"
            >
            <v-list-tile-content  >
              <v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`"> 
              </v-list-tile-title>
           </v-list-tile-content>
    </template>
</v-autocomplete>