Vue.js search keyword in array

user_9775904 0
Viewed 11812

I am using Vue.js to filter items from a JSON array, using an input field. The array consists of mobile phones.

Looking at the Samsung array, I have Samsung Galaxy S5, Samsung Galaxy S6 etc.

Now when I type: Samsung, I get a list of all the samsungs. When I type Galaxy S5, I get the Samsung Galaxy S5. But when I type Samsung S5 I get nothing, because in between 'Samsung' and 'S5' there is 'Galaxy'.

I hope someone can help me out on this one.

My code:

<input type="text" v-model="keyword" class="form-control" id="telefoon" placeholder="Search...">


<script>
var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    samsungList: []
  },
  computed: {
    samsungFilteredList() {
      return this.samsungList.filter((samsung) => {
        return samsung.title.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
});
</script>
vue.js css html javascript
3 Answers

you can split your search keyword and check, if each word exists in title with every, which will return true, if each word will exist in title

var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    samsungList: []
  },
  computed: {
    samsungFilteredList() {
      return this.samsungList.filter((samsung) => {
        return this.keyword.toLowerCase().split(' ').every(v => samsung.title.toLowerCase().includes(v));
      });
    }
  }
});
user_104303290

Your requirement is partial search, For that includes is not the correct method as it looks for exact match. You can use indexOf

 let filteredResult = array.filter((i) => i.indexOf(this.keyword.toLowerCase()) > -1); // this will serve your purpose.
user_9000320

You can use "getMatchingResults()" method in your "samsungFilteredList " like below

var samsungList = ["Samsung Galaxy S5", "Samsung Galaxy S6"]

function getMatchingResults(input) {
 return samsungList.filter(d => input.split(' ').every(v => d.toLowerCase().includes(v.toLowerCase())))
}

console.log(getMatchingResults('samsung'))

console.log(getMatchingResults('samsung s5'))

console.log(getMatchingResults('galaxy'))

user_30484290
Related