Customize the appearance of the v-autocomplete component in Vuetify

Question

Customize the appearance of the v-autocomplete component in Vuetify

How can I style the autocomplete component to only show words that begin with the letters I'm typing, rather than all words containing those letters? Also, is there a way to display the typed letters in bold without highlighting them?

https://i.sstatic.net/0tVgt.png

Below is the code snippet in question:

<template>
  <div class="inspire" style="background-color:red">
    <v-app-bar style="padding: 10px 0px;"
      color="rgba(33,33,33,255)" 
      elevation="0" 
      height="64px"
    > 
      <div style="width:100%" v-if="$route.name == 'Mapping'">
        <template>
          <v-autocomplete
            v-model="valuesActor"
            :items="actorArray"
            :search-input.sync="searchActor"
            filled
            @blur="toggleSearch"
            background-color="#313131"
            append-icon=""
            color="var(--textLightGrey)"
            :menu-props="{maxWidth: 1600}"
            placeholder="Search for actors"
            active
          >
          </v-autocomplete>
        </template>
      </div>  
    </v-app-bar>
  </div>
</template>

javascript css vue.js vuetify.js v-autocomplete

Answer 1

Answer №1

Make the text stand out:

enhance the item slot in the autocomplete component by implementing a method to customize the displayed text. Utilize regex to identify and highlight the text that matches the query string by encapsulating it within a <strong> tag.

<v-autocomplete>
 <template v-slot:item="data">
    <div v-html="makeBold(data.item)"></div>
  </template>
</v-autocomplete>

makeBold(text) {
  return text.replace(new RegExp(this.searchActor, 'gi'), match => {
    return '<strong>' + match + '</strong>';
  });
}

Apply filter only to start of string

Employ the filter prop within the autocomplete to define a custom filter function. This function will evaluate each item in the autocomplete list and return a boolean based on the supplied query.

<v-autocomplete
  :filter="customFilter"
/>

customFilter(item, queryText) {
  const itemText = item.toLowerCase();
  const searchText = queryText.toLowerCase();

  return itemText.startsWith(searchText);
}

Set input focus when page loads

Implement this functionality using standard Vue features, not just limited to Vuetify. Add a ref to the element, which allows you to access the DOM element programmatically in your code. Then, in the mounted hook of your component, invoke the focus function.

<v-autocomplete
  ref="auto"
/>

mounted() {
  this.$refs.auto.focus()
}

See a complete example in this codepen.

Answer 2

Make the text stand out:

enhance the item slot in the autocomplete component by implementing a method to customize the displayed text. Utilize regex to identify and highlight the text that matches the query string by encapsulating it within a <strong> tag.

<v-autocomplete>
 <template v-slot:item="data">
    <div v-html="makeBold(data.item)"></div>
  </template>
</v-autocomplete>

makeBold(text) {
  return text.replace(new RegExp(this.searchActor, 'gi'), match => {
    return '<strong>' + match + '</strong>';
  });
}

Apply filter only to start of string

Employ the filter prop within the autocomplete to define a custom filter function. This function will evaluate each item in the autocomplete list and return a boolean based on the supplied query.

<v-autocomplete
  :filter="customFilter"
/>

customFilter(item, queryText) {
  const itemText = item.toLowerCase();
  const searchText = queryText.toLowerCase();

  return itemText.startsWith(searchText);
}

Set input focus when page loads

Implement this functionality using standard Vue features, not just limited to Vuetify. Add a ref to the element, which allows you to access the DOM element programmatically in your code. Then, in the mounted hook of your component, invoke the focus function.

<v-autocomplete
  ref="auto"
/>

mounted() {
  this.$refs.auto.focus()
}

See a complete example in this codepen.

Customize the appearance of the v-autocomplete component in Vuetify

Answer №1

Make the text stand out:

Apply filter only to start of string

Set input focus when page loads

Similar questions

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

Unable to retrieve private field using a public getter method through a proxy

The most efficient method for creating a substantial amount of pre-existing HTML within the DOM using jQuery

Angular directive that verifies the presence of a specific number of child li elements

Displaying content conditionally in Vue.js

What is the best way to show only a section of a background in CSS?

Is it possible to conceal a form field until a previous field has been completed?

How to implement variables within the .map() function in JavaScript?

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

"Maximizing Bootstrap Functionality with Angular 2: Step-by

What could be causing my mobile page to require two scrolls?

How can I eliminate the border from the last child in a row within a responsive framework?

Setting attributes to a DOM element using String in jQuery

Navigating Through the DOM with Selenium using XPath Axes

The Vue Prop does not have an initializer and is not explicitly assigned in the constructor

Tips for sending a Postgres Pool or Client over a socket

Tips for optimizing Angular source code to render HTML for better SEO performance

The counter variable does not function properly within a setInterval function

Timing of Bindings in AngularJS