Могу ли я сделать поиск по нескольким полям, используя vue-select. - PullRequest
Новая
       34

Могу ли я сделать поиск по нескольким полям, используя vue-select.

0 голосов
/ 15 октября 2018

По умолчанию поиск выполняется в поле «метка».Но я хочу сделать поиск в обоих из них (значение, метка).Любой совет? 

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>

1 Ответ

0 голосов
/ 15 октября 2018

В последней версии 2.5.1 из vue-select я вижу реквизиты вроде filterBy и filter.Я думаю, что вы можете использовать только filterBy для достижения того, что вы хотите.Из комментариев исходного кода:

Обратный вызов, чтобы определить, должна ли предоставленная опция соответствовать текущему тексту поиска.Используется для определения необходимости отображения опции.

Вот пример (поиск по 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

...