rad*_*per 4 javascript search vue.js vue-select
它默认在“标签”字段中搜索。但我想在他们两个(价值,标签)中进行搜索。有什么建议吗?
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app'
});Run Code Online (Sandbox Code Playgroud)
<!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>Run Code Online (Sandbox Code Playgroud)
在上一个版本 2.5.1 中,vue-select我看到像filterBy和这样的道具filter。我认为你可以使用 justfilterBy来实现你想要的。从源代码注释:
回调以确定提供的选项是否应与当前搜索文本匹配。用于确定是否应显示该选项。
下面是例子(通过搜索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
}
}
})Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
源代码道具行的链接: