Can I do a search in multiple fields using vue-select.

Question

It's searching in the "label" field as default. But I want to do search in both of them (value, label). Any advice?

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app'
});

<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/vue@2.1.10"></script>
<script src="http://unpkg.com/vue-select@2.0.0"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app" class="container-fluid">
    <h2>VueSelect Basic Example</h2>
    <v-select :options="[{'value': 'ABC', 'label': 'Lorem ipsum dolor 1'}, {'value': 'CDE', 'label': 'Lorem ipsum dolor 2'}, {'value': 'VYZ', 'label': 'Lorem ipsum dolor 3'}, ]"></v-select>
  </div>
</body>
</html>

you can choose one field but not both of them – Boussadjra Brahim Oct 15 '18 at 13:13 — Boussadjra Brahim, Oct 15 '18 at 13:13
so, is there any other solution? – radeveloper Oct 15 '18 at 13:32 — radeveloper, Oct 15 '18 at 13:32

score 10 · Accepted Answer · answered Oct 15 '18 at 13:46

In last version 2.5.1 of vue-select I see props like filterBy and filter. I think you can use just filterBy to achieve what you want. From source code comments:

Callback to determine if the provided option should match the current search text. Used to determine if the option should be displayed.

Here is example(search by name and lastname even without label):

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [{ label: "1", name: "John", lastname: "Johnson" }, { label: "2", name: "Justin", lastname: "Well" }],
    myFilter: (option, label, search) => {
      let temp = search.toLowerCase();
      return option.name.toLowerCase().indexOf(temp) > -1 || 
      option.lastname.toLowerCase().indexOf(temp) > -1
    }
  }
})

<script src="http://unpkg.com/vue@2.5.2"></script>
<script src="http://unpkg.com/vue-select@2.5.1"></script>
<div id="app">
    <h2>VueSelect Basic Example</h2>
    <v-select :options="options" :filter-by="myFilter"></v-select>
  </div>

Links to source code props lines:

filterBy

filter

Thank you, that is what I am looking for. – radeveloper Oct 15 '18 at 13:59 — radeveloper, Oct 15 '18 at 13:59

score 2 · Answer 2 · answered Oct 10 '21 at 12:28

you can achive this by another way. v-autocomplete is another built-in component by which you can search through your select items.

<v-autocomplete
  :rules="formRules"
  v-model="form"
  :items="selectItems"
  menu-props="auto"
  label="autocomplete"
>
  <template slot="selection" slot-scope="data">
    {{ 'name: ' + data.item.name +' last name: ' + data.item.lastname + ' label: ' + data.item.label }}
  </template>
  <template slot="item" slot-scope="data">
    {{ 'name: ' + data.item.name +' last name: ' + data.item.lastname + ' label: ' + data.item.label }}
  </template>
</v-autocomplete>

now by searching in the v-autocomplete searchbar the list items are filtered based on the searched text.

Can I do a search in multiple fields using vue-select.

2 Answers2