Is it possible for Vuetify autocomplete to be configured with multiple arrays?

Question

Is it possible for Vuetify autocomplete to be configured with multiple arrays?

Within this scenario, two separate data arrays are present for fruits and animals. Initially, when the user engages with the v-autocomplete component, the search bar will display a list of fruit data: ["apple","banana","kiwi"]. Upon entering text into the search bar, the fruit data will disappear and be replaced by animal data fetched from an API. Despite the presence of two distinct data arrays, only one item can be added to the Vuetify autocomplete at a time.

 <v-autocomplete 
  v-model="select" 
:items="fruits" 
:search-input.sync="search">

Considering this limitation, is there any possible solution to dynamically change the items array based on the user's input in the input field?

javascript vue.js vuetify.js

Answer 1

Answer №1

To enhance your fruit array, consider combining it with the search results retrieved from your API.

Imagine you maintain an array named items to store all results and another array named fruit specifically for fruits. Upon creating your component, you may merge the contents of fruit into items, like so: this.items = [...this.fruit].

Subsequently, when conducting a search and obtaining the results stored in an array called

results</code, you can update <code>items

to include the items in both results and fruit, as shown below:

this.items = [...this.fruit, ...this.results]

Vuetify appears to apply its own search algorithm post fetching search outcomes, thereby filtering out any fruit entries that do not match your query.

If interested, you can view a demo I created on Codepen here.

Answer 2

To enhance your fruit array, consider combining it with the search results retrieved from your API.

Imagine you maintain an array named items to store all results and another array named fruit specifically for fruits. Upon creating your component, you may merge the contents of fruit into items, like so: this.items = [...this.fruit].

Subsequently, when conducting a search and obtaining the results stored in an array called

results</code, you can update <code>items

to include the items in both results and fruit, as shown below:

this.items = [...this.fruit, ...this.results]

Vuetify appears to apply its own search algorithm post fetching search outcomes, thereby filtering out any fruit entries that do not match your query.

If interested, you can view a demo I created on Codepen here.

Is it possible for Vuetify autocomplete to be configured with multiple arrays?

Answer №1

Similar questions

How to efficiently handle insertion and updating of multiple rows in Laravel using arrays

Make sure to invoke the navigate() function within a React.useEffect() hook, rather than calling it during the initial rendering of

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

Choose the text value of the jQuery select menu from the specified column in the table

Increasing counter on the backend using PHP or JavaScript

What is the best way to dynamically identify the property names of my object?

Retrieve information using the request npm package

Unable to activate the date range picker

Warning from Vue Router: Issue with push/replace state - TypeError: history[(intermediate value)(intermediate value)(intermediate value)] is not a valid function

"Utilize JavaScript to assign array values to the main object for efficient data

Exporting functions using reactjs and babel

The extracted text from the window appears to be blank

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Utilizing asynchronous false in Wordpress Ajax functionality

The issue with the autoresize feature in the tinymce plugin arises when trying to delete HTML img content using the backspace

What is the best way to retain checkbox states after closing a modal?

The Data Table experiences intermittent hanging issues (Table is empty) when sorting or loading data with Knockout binding

Fixing issues with Ajax calls in Internet Explorer versions 7 and 8

Extjs: How to Select a Node After Creating a Tree Structure

Iterate through an array of objects and add them to a fresh array