Filter Vue.js dropdown by checking if a word is present in the array (partial match only)

Question

Filter Vue.js dropdown by checking if a word is present in the array (partial match only)

Is there a way to modify the Vue.js code above so that it filters by dropdown to match the entire array even if there are commas separating other words? Currently, it only matches if the type: BMW, but I would like it to also display cards that have something like type: BMW, Ford.

Additionally, as a beginner in Vue, I was wondering if someone could show me how to update it instantly when a select option is chosen without needing to press the "search" button?

Thank you very much.

javascript vue.js filter

Answer 1

Answer №1

If you want to search by type, one way is to split the type string by a comma and then check if the array includes the specified value:

      this.searchResults = this.items.filter(function(item) {
        let isFiltered = true;
        if (filterType) {
          isFiltered = item.type.split(',').includes(filterType);
        }
        if (isFiltered) {
          if (filterCountry && filterCountry.length > 0) {
            isFiltered = item.country == filterCountry;
          }
        }
        if (isFiltered) {
          if (filterYear && filterYear.length > 0) {
            isFiltered = item.year == filterYear;
          }
        }
        return isFiltered;
      })

If you want to enable immediate searching, you can use the @change handler on your select elements:

<select v-model="selectedType" @change="search">

Answer 2

If you want to search by type, one way is to split the type string by a comma and then check if the array includes the specified value:

      this.searchResults = this.items.filter(function(item) {
        let isFiltered = true;
        if (filterType) {
          isFiltered = item.type.split(',').includes(filterType);
        }
        if (isFiltered) {
          if (filterCountry && filterCountry.length > 0) {
            isFiltered = item.country == filterCountry;
          }
        }
        if (isFiltered) {
          if (filterYear && filterYear.length > 0) {
            isFiltered = item.year == filterYear;
          }
        }
        return isFiltered;
      })

If you want to enable immediate searching, you can use the @change handler on your select elements:

<select v-model="selectedType" @change="search">

Answer 3

Answer №2

Here is a snippet that corresponds to the code in your fiddle:

I updated the searchResults property to be a computed property, ensuring it automatically updates whenever there's a change in selectedType, selectedCountry, or selectedYear.

To validate against the type, I recommend splitting your CSV list first and checking if the type exists within that array. You can achieve this by using

item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;

It's crucial to have a strong understanding of Vue basics before diving into this. I suggest reading up on Computed Properties and Watchers

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    selectedCountry: '',
    selectedYear: '',
    items: [{
        name: 'Nolan',
        type: 'mercedes, ford',
        year: '2020',
        country: 'england'
      },
      {
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country: 'belgium'
      },
      {
        name: 'John',
        type: 'bmw, audi',
        year: '2019',
        country: 'england'
      },
      {
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england'
      }
    ],
  },
  computed: {
    searchResult: function() {
      let filterType = this.selectedType,
        filterCountry = this.selectedCountry,
        filterYear = this.selectedYear

      return this.items.filter(function(item) {
        let filtered = true
        if (filterType && filterType.length > 0) {
          filtered = item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;
        }
        if (filtered) {
          if (filterCountry && filterCountry.length > 0) {
            filtered = item.country == filterCountry
          }
        }
        if (filtered) {
          if (filterYear && filterYear.length > 0) {
            filtered = item.year == filterYear
          }
        }
        
        return filtered;
      })
    }
  }
})

.list-item {
  margin-top: 50px;
}

.card {
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.16);
  width: 400px;
  padding: 20px 30px;
  margin-bottom: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedType">
    <option value="" disabled selected hidden>Type</option>
    <option value="mercedes">Mercedes</option>
    <option value="bmw">BMW</option>
  </select>

  <select v-model="selectedCountry">
    <option value="" disabled selected hidden>Country</option>
    <option value="belgium">Belgium</option>
    <option value="england">England</option>
  </select>

  <select v-model="selectedYear">
    <option value="" disabled selected hidden>Year</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
  </select>

  <div class="list-item" v-for="item in searchResult">
    <div class="card">
      <p>Name: {{ item.name }}</p>
      <p>Car: {{ item.type }}</p>
      <p>Year: {{ item.year }}</p>
      <p>Country: {{ item.country }}</p>
    </div>
  </div>
</div>

Answer 4

Here is a snippet that corresponds to the code in your fiddle:

I updated the searchResults property to be a computed property, ensuring it automatically updates whenever there's a change in selectedType, selectedCountry, or selectedYear.

To validate against the type, I recommend splitting your CSV list first and checking if the type exists within that array. You can achieve this by using

item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;

It's crucial to have a strong understanding of Vue basics before diving into this. I suggest reading up on Computed Properties and Watchers

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    selectedCountry: '',
    selectedYear: '',
    items: [{
        name: 'Nolan',
        type: 'mercedes, ford',
        year: '2020',
        country: 'england'
      },
      {
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country: 'belgium'
      },
      {
        name: 'John',
        type: 'bmw, audi',
        year: '2019',
        country: 'england'
      },
      {
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england'
      }
    ],
  },
  computed: {
    searchResult: function() {
      let filterType = this.selectedType,
        filterCountry = this.selectedCountry,
        filterYear = this.selectedYear

      return this.items.filter(function(item) {
        let filtered = true
        if (filterType && filterType.length > 0) {
          filtered = item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;
        }
        if (filtered) {
          if (filterCountry && filterCountry.length > 0) {
            filtered = item.country == filterCountry
          }
        }
        if (filtered) {
          if (filterYear && filterYear.length > 0) {
            filtered = item.year == filterYear
          }
        }
        
        return filtered;
      })
    }
  }
})

.list-item {
  margin-top: 50px;
}

.card {
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.16);
  width: 400px;
  padding: 20px 30px;
  margin-bottom: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedType">
    <option value="" disabled selected hidden>Type</option>
    <option value="mercedes">Mercedes</option>
    <option value="bmw">BMW</option>
  </select>

  <select v-model="selectedCountry">
    <option value="" disabled selected hidden>Country</option>
    <option value="belgium">Belgium</option>
    <option value="england">England</option>
  </select>

  <select v-model="selectedYear">
    <option value="" disabled selected hidden>Year</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
  </select>

  <div class="list-item" v-for="item in searchResult">
    <div class="card">
      <p>Name: {{ item.name }}</p>
      <p>Car: {{ item.type }}</p>
      <p>Year: {{ item.year }}</p>
      <p>Country: {{ item.country }}</p>
    </div>
  </div>
</div>

Filter Vue.js dropdown by checking if a word is present in the array (partial match only)

Answer №1

Answer №2

Similar questions

AngularJS chatbox widget for interactive communication

Creating 3D Shapes with three.js

Is it possible to alter the canvas origin when using an Orthographic camera with a CSS3D

Passing Optional Parameters to AngularJS Modal

`How to prevent other events from triggering in jQuery while an animation is running`

The csurf token in Node.js consistently shows as invalid

What is the solution for resolving a 404 error when making a POST request using Axios in a

Spin Three.js camera around central point with mouse control

Connect Promise.all() with an array of identification numbers

Encounter a scope.router.go error when using Vue.js with System.js

Does three.js have a MoveTo feature available?

Having trouble sending an HTTPS request in NodeJS only to receive an HTTP response instead

Problem with Shopping Cart: Unable to add items to the "Shopping Cart Page". Error in setting property 'textContent' to null

Creating a texture in Three.js using an image file

Having trouble with the postcss-import grunt plugin?

Flashing background color appears as I scroll

How come I'm getting a numerical output instead of an array after using the array.push() method in this code?

Tips for adjusting the file name and extension when saving a text file from a data URI

Issues with the functionality of Onsen UI ons-splitter-side event handlers have been reported

Angular 2 Element Selection: Dealing with Unrendered Elements