Vue.js search keyword in array

Question

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>

Artyom Amiryan · Accepted Answer · 2018-11-13 08:19:07Z

10

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));
      });
    }
  }
});

answered Nov 13, 2018 at 8:19

Artyom Amiryan

2,9961 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farooq Ahmed Khan · Accepted Answer · 2018-11-13 08:19:24Z

4

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.

answered Nov 13, 2018 at 8:19

Farooq Ahmed Khan

4,0943 gold badges29 silver badges36 bronze badges

1 Comment

Mxkert Over a year ago

Thanks for the response. I used Artyom's solution, but will still look into yours.

Nitish Narang · Accepted Answer · 2018-11-13 08:24:42Z

1

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'))

answered Nov 13, 2018 at 8:24

Nitish Narang

4,2042 gold badges18 silver badges22 bronze badges

Collectives™ on Stack Overflow

Vue.js search keyword in array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related