我可以使用 vue-select 在多个字段中进行搜索吗？

Question

它默认在 "label" 字段中搜索。但我想在两者（值、标签）中进行搜索。有什么建议吗？

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>

Answer 1

在 vue-select 的最新版本 2.5.1 中，我看到 filterBy 和 filter 等道具。我认为您可以只使用 filterBy 来实现您想要的。来自源代码评论：

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

这里是示例（即使没有标签也可以通过 name 和 lastname 搜索）：

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>

源代码道具行链接：

filterBy

filter

Answer 2

您可以通过其他方式实现。 v-autocomplete 是另一个内置组件，您可以通过它搜索 select 项。

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

现在通过在 v-autocomplete 搜索栏中搜索，列表项会根据搜索到的文本进行过滤。

我可以使用 vue-select 在多个字段中进行搜索吗？

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

javascript

search

vue.js

vue-select