Implementation of Vue.js for filtering search results in a list view

Question

Implementation of Vue.js for filtering search results in a list view

I would like to enhance my searching functionality by including both header and content. Currently, the search is only based on content. Any recommendations on how to modify this source code to accomplish that? Thank you

Below is the HTML snippet:

<div id="list">
<input type="text" v-model="search">
  <ol>
    <li v-for="(items, key) in groupedItems">
      <h3>{{ key }}</h3>
      <p v-for="todo in items">{{ todo.name }}</p>
    </li>
  </ol>
</div>

For a preview of the code, visit this JS Fiddle link: https://jsfiddle.net/60jtkp30/9/

javascript vue.js vuejs2

Answer 1

Answer №1

Although not the most elegant solution, after reviewing your code on jdfiddle, it appears that simply modifying the filter function should suffice.

var list = new Vue({
    el: '#list',
    data: {
    search: '',
        items: [
            { name: 'mike', type: 'student' },
            { name: 'beckham john', type: 'footballer' },
            { name: 'walcott', type: 'footballer' },
    { name: 'cech', type: 'footballer' },
    { name: 'jordan', type: 'actor' },
    { name: 'tom', type: 'actor' },
    { name: 'john', type: 'actor' }
        ]
    },
computed: {
    groupedItems() {
    const arr = {}
    //search function
    var searchResult = this.items.filter( task => {
        return task.name.toLowerCase().indexOf(this.search.toLowerCase())>-1 || task.type.toLowerCase().indexOf(this.search.toLowerCase())>-1;
    } )
    //grouping
    for(var i = 0; i < searchResult.length; i++) {
        const key = searchResult[i].type
        if (arr[key]) {
        arr[key].push(searchResult[i])
      } else {
        arr[key] = [searchResult[i]]
      }
    }
    return arr
  }
}
})

Answer 2

Although not the most elegant solution, after reviewing your code on jdfiddle, it appears that simply modifying the filter function should suffice.

var list = new Vue({
    el: '#list',
    data: {
    search: '',
        items: [
            { name: 'mike', type: 'student' },
            { name: 'beckham john', type: 'footballer' },
            { name: 'walcott', type: 'footballer' },
    { name: 'cech', type: 'footballer' },
    { name: 'jordan', type: 'actor' },
    { name: 'tom', type: 'actor' },
    { name: 'john', type: 'actor' }
        ]
    },
computed: {
    groupedItems() {
    const arr = {}
    //search function
    var searchResult = this.items.filter( task => {
        return task.name.toLowerCase().indexOf(this.search.toLowerCase())>-1 || task.type.toLowerCase().indexOf(this.search.toLowerCase())>-1;
    } )
    //grouping
    for(var i = 0; i < searchResult.length; i++) {
        const key = searchResult[i].type
        if (arr[key]) {
        arr[key].push(searchResult[i])
      } else {
        arr[key] = [searchResult[i]]
      }
    }
    return arr
  }
}
})

Implementation of Vue.js for filtering search results in a list view

Answer №1

Similar questions

The Google Picker API encounters a server error when attempting to retrieve the OAuth token after being released as a private add-on

"Encountering a problem with b-table in the most recent release of Buefy (version 0.9

Angular: identifying inconsistencies between previous and current values with range slider and numeric input spinner

Ensuring User Data is Current in the UI with Firebase Auth Callbacks

Rounding Decimals using JavaScript

I'm getting an error message that says THREE is not recognized. How can I resolve this issue

Invoke the function defined within a modal when dismissing a ui-bootstrap modal

How can I transform an array of text into dropdown options?

Retrieve the initial value of the input element following a modification

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

ng-repeat table grouping by date

Creating unique URLs for websites can be accomplished by following these steps:

Emphasize the engaged menu selection when the page is refreshed

Error occurs when attempting to access second level route in Vue directly

The active class functions properly with errors, but does not respond to messages or warnings

Tips for generating dynamic JSON: Organize the data by filtering it and creating key-value pairs for the appropriate JSON objects

Ways to require semicolons in a Typescript interface

There seems to be an issue with the location.href function in the server-side code of

Issue with gulp-uglifyjs arising from an empty return by gulp.src

Using Web SQL always seems to throw me for a loop