Menu
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/[email protected]"></script>
<script src="http://unpkg.com/[email protected]"></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>
386
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/[email protected]"></script>
<script src="http://unpkg.com/[email protected]"></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
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
