Should I use the item-text property or another property in v-autocomplete for Vuetify search?

I have a to-do list that consists of an array of objects with properties (id, title, description). I want to display the title in the v-autocomplete, but when I search for a word, it works fine. However, what I actually want is to search for either the description or the title.
For example: if I type programming, it should display Read books.

Template

 <v-autocomplete
    v-model="idTodo"
    :items="todos"
    label="search todo..."
    item-value="id"
    item-text="title"
  />

Script

    visitCategories: [],
    todos: [
      { id: 1, title: "Read books", description: "read books related to programming" },
      {
        id: 2,
        title: "watch tutorials",
        description: "watch tutorials in many platforms like Youtube, Udemy...",
      },
    ],
    idTodo: -1,
javascriptvue.jsvuetify.js

Answer №1

To resolve this issue, create a custom filter.

    <v-autocomplete
    v-model="idTodo"
    :items="todos"
    label="search todo..."
    :filter="filterData"
    item-value="id"
  />

Next, add the 'filterData' function within the methods section.

    methods: {
    filterData(item, queryText) {
      return (
        item.title.toLowerCase().includes(queryText.toLowerCase()) ||  
        item.description.toLowerCase().includes(queryText.toLowerCase())
      );
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript event array

I have a JavaScript array that looks like this: var fruits=['apple','orange','peach','strawberry','mango'] I would like to add an event to these elements that will retrieve varieties from my database. Fo ...

phpjavascripthtml

Troubleshooting problem with jQuery's .has() and .click() functions

I have created a lengthy html code: <div id="el"> <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p <p data-skip>Bl ...

javascriptjqueryhtml

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using: https://www.w3schools.com/howto/howto_js_collapsible.asp Here is the HTML: <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> &l ...

javascripthtmlcss

Iframe Loading at Lightning Speed

I have set up a script to load my iframe, but I noticed that the script loads the iframe content too quickly. Is there a way for me to configure it to preload all CSS images and content in the background before showing the full iframe content? Here is my ...

javascriptjqueryhtmliframe

Determine the size of an SVG while taking into consideration any strokes applied

Is there a way to seamlessly position an SVG in the corner of a div, despite having a dynamically generated stroke? Calculating the distance to the outermost part of the border proves difficult when dealing with irregular shapes like stars. Here's my ...

javascriptjquerysvg

Ways to split a string using jQuery

I am working with a jQuery string array that contains the following elements: ["$1#Structure$2#Accounting$3Acc#$1Programming"] My task is to split the strings after the '#' symbol and provide the following result: ["Structure","Accounting","Ac ...

javascriptjquerystring

Built-in Promises within MongoDB

Is there a way to determine which methods in mongoDb have an inbuilt promise? For example, "updateOne() , findOne()" have inbuilt promises that we can access using ".then", but many other mongoDB methods lack this feature. How can we identify which methods ...

javascriptnode.jsmongodbexpressmongodb-query

How to assign a global variable in Angular 2 from within a promise

I have encountered a strange issue while trying to assign a response to a global variable inside an observable. Here's the logic of my program: Fetch the latest playlists IDs from elastic search (using a type definition file for elastic search). T ...

javascriptangularpromiserxjses6-promise

AngularJS $HTTP service is a built-in service that makes

I am facing an issue with pulling the list of current streams from the API and iterating that information with AngularJS. I have tried inputting the JSON data directly into the js file, and it works fine with Angular. However, when I use an http request as ...

javascriptjsonangularjstwitch

Unable to input any text into the textfield

After implementing redux-form-material-ui for my form, I am facing an issue where I cannot type anything in the textfield. Despite having two textfields and an Autocomplete option, only the Autocomplete box seems to be functioning properly while the textfi ...

javascriptreactjsreduxmaterial-uiredux-form

The functionality of the JQuery click event is limited to one use only

$("#button_title_delete").click(function(){ jQuery.ajax({type:'POST', url:'delete.php', data: 'id='+$("bid").val(), success: function(veri) { $("#delete_result").html(veri);} } ...

javascriptjquery

Reconnecting the bone: A guide to reestablishing the mesh skeleton in Three.js after rebind

I am facing a challenge where I need to independently rotate bones on a rigged hand mesh along the global axis using direction vectors to calculate their orientation. To tackle this, I have developed the following code: function boneLookAtLocal(bone, posit ...

javascriptanimationthree.jsmesh

Is there really a need to go through the hassle of creating a pure javascript/jquery widget when I can simply load it into an

Previously, I had a widget with the following code: <script src="http://www.mywebsite.com/widget/widget.js?type=normal" type="text/javascript"></script> <div id="archie-container"></div> This widget checked for the presence of jQu ...

javascriptjqueryajaxiframewidget

Issues with functionality of buttons in dialog boxes at Onsen are currently being experienced

I have been working on a Cordova application using Onsen UI. Following the guidelines on the Onsen website, I created a dialog. Unfortunately, the buttons in my dialog are not functioning properly. Here is the code snippet from questlistapp.js: var ques ...

javascriptangularjscordovaonsen-ui

Organize data by multiple criteria using List.js

Attempting to configure the list.js plugin to allow sorting based on multiple values. Specifically, the goal is to sort by category first and then alphabetically by title within each category. See a demo here: http://jsfiddle.net/8E7cH/ This functional ...

javascriptjquerylistgoogle-chromesorting

What is the best way to remove the underline in Material-UI while still keeping the selection feature intact in Autocomplete?

Seeking to develop an Autocomplete feature with the TextField component while eliminating the underline. I successfully disabled the underline by utilizing InputProps={{ disableUnderline: true }} in the TextField properties, however, it also eliminated t ...

javascriptcssreactjsmaterial-uiunderline

Having trouble getting Angular-UI-Select to work with a basic variable on $scope?

How can you reset an array with selected values so that the values can be reselected from the dropdown? I am working with a people array where the values are initially displayed in a select dropdown. When I choose certain names, they get transferred to th ...

javascriptarraysangularjsangular-ui-select

Error message related to the callback type issue in Node.js with the http.createServer

Having recently embarked on my journey with node.js, I delved into various tutorials and encountered a stumbling block while attempting to refactor some code. The tutorial that caught my attention and led me to this hiccup can be found here: http://www.tu ...

javascriptnode.js

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

javascripthtml

The callback function for ajax completion fails to execute

My current framework of choice is Django. I find myself faced with the following code snippet: var done_cancel_order = function(res, status) { alert("xpto"); }; var cancel_order = function() { data = {}; var args = { type:"GET", url:"/exch ...

javascriptjqueryajaxdjango