Skip to content

Commit aca7b5a

Browse files
author
Jeff
committed
add filter prop allowing full customization of filtering
1 parent 4775023 commit aca7b5a

File tree

6 files changed

+5915
-32
lines changed

6 files changed

+5915
-32
lines changed

‎dev.html

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,33 @@
2929

3030
<body>
3131
<div id="app">
32-
<v-select placeholder="default" :options="options"></v-select>
33-
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
34-
<v-select placeholder="multiple" multiple :options="options"></v-select>
35-
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
36-
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
37-
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
38-
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
39-
<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
40-
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
41-
<v-select placeholder="custom option template" :options="options" multiple>
42-
<template slot="selected-option" scope="option">
43-
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/>
44-
{{option.label}}
45-
</template>
32+
<!--<v-select placeholder="default" label="title" :options="fuseSearchOptions" :filter-function="fuse"></v-select>-->
33+
<v-select label="title" :options="fuseSearchOptions" :filter="fuse">
4634
<template slot="option" scope="option">
47-
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/>
48-
{{option.label}} ({{option.value}})
35+
<strong>{{ option.title }}</strong><br>
36+
<em>{{ option.author.firstName }} {{ option.author.lastName }}</em>
4937
</template>
5038
</v-select>
51-
<v-select disabled placeholder="disabled" value="disabled"></v-select>
52-
<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>
39+
<!--<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>-->
40+
<!--<v-select placeholder="multiple" multiple :options="options"></v-select>-->
41+
<!--<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>-->
42+
<!--<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>-->
43+
<!--<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>-->
44+
<!--<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>-->
45+
<!--<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>-->
46+
<!--<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>-->
47+
<!--<v-select placeholder="custom option template" :options="options" multiple>-->
48+
<!--<template slot="selected-option" scope="option">-->
49+
<!--<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> -->
50+
<!--{{option.label}}-->
51+
<!--</template>-->
52+
<!--<template slot="option" scope="option">-->
53+
<!--<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> -->
54+
<!--{{option.label}} ({{option.value}})-->
55+
<!--</template>-->
56+
<!--</v-select>-->
57+
<!--<v-select disabled placeholder="disabled" value="disabled"></v-select>-->
58+
<!--<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>-->
5359
</div>
5460
</body>
5561

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"extract-text-webpack-plugin": "^1.0.1",
3737
"file-loader": "^0.8.4",
3838
"function-bind": "^1.0.2",
39+
"fuse.js": "^3.2.0",
3940
"gh-pages": "^0.11.0",
4041
"highlight.js": "^9.9.0",
4142
"html-loader": "^0.4.4",

‎src/components/Select.vue

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,19 @@
499499
}
500500
},
501501
502+
filter: {
503+
"type": Function,
504+
default(vm) {
505+
return vm.mutableOptions.filter((option) => {
506+
let label = vm.getOptionLabel(option)
507+
if (typeof label === 'number') {
508+
label = label.toString()
509+
}
510+
return this.filterFunction(option, label, vm.search)
511+
});
512+
}
513+
},
514+
502515
/**
503516
* An optional callback function that is called each time the selected
504517
* value(s) change. When integrating with Vuex, use this callback to trigger
@@ -916,14 +929,8 @@
916929
* @return {array}
917930
*/
918931
filteredOptions() {
919-
let options = this.mutableOptions.filter((option) => {
920-
let label = this.getOptionLabel(option)
921-
if (typeof label === 'number') {
922-
label = label.toString()
923-
}
924-
return this.filterFunction(option, label, this.search)
925-
})
926-
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
932+
let options = this.search.length ? this.filter(this) : this.mutableOptions;
933+
if (this.taggable && !this.optionExists(this.search)) {
927934
options.unshift(this.search)
928935
}
929936
return options

‎src/dev.js

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import Vue from 'vue'
2+
import Fuse from 'fuse.js'
3+
import resource from 'vue-resource'
24
import vSelect from './components/Select.vue'
35
import countries from 'docs/data/advanced.js'
46
import debounce from 'lodash/debounce'
5-
import resource from 'vue-resource'
7+
import fuseSearchOptions from './fuseSearchOptions'
68

79
Vue.use(resource)
810

@@ -17,18 +19,24 @@ new Vue({
1719
placeholder: "placeholder",
1820
value: null,
1921
options: countries,
20-
ajaxRes: []
22+
ajaxRes: [],
23+
fuseSearchOptions
2124
},
2225
methods: {
2326
search(search, loading) {
24-
loading(true)
27+
loading(true);
2528
this.getRepositories(search, loading, this)
2629
},
2730
getRepositories: debounce((search, loading, vm) => {
2831
vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
29-
vm.ajaxRes = res.data.items
32+
vm.ajaxRes = res.data.items;
3033
loading(false)
3134
})
32-
}, 250)
35+
}, 250),
36+
fuse({mutableOptions, search}) {
37+
return new Fuse(mutableOptions, {
38+
keys: ['title', 'author.firstName', 'author.lastName'],
39+
}).search(search);
40+
}
3341
}
34-
})
42+
});

‎src/fuseSearchOptions.js

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
export default [
2+
{
3+
title: "Old Man's War",
4+
author: {
5+
firstName: "John",
6+
lastName: "Scalzi"
7+
}
8+
},
9+
{
10+
title: "The Lock Artist",
11+
author: {
12+
firstName: "Steve",
13+
lastName: "Hamilton"
14+
}
15+
},
16+
{
17+
title: "HTML5",
18+
author: {
19+
firstName: "Remy",
20+
lastName: "Sharp"
21+
}
22+
},
23+
{
24+
title: "Right Ho Jeeves",
25+
author: {
26+
firstName: "P.D",
27+
lastName: "Woodhouse"
28+
}
29+
},
30+
{
31+
title: "The Code of the Wooster",
32+
author: {
33+
firstName: "P.D",
34+
lastName: "Woodhouse"
35+
}
36+
},
37+
{
38+
title: "Thank You Jeeves",
39+
author: {
40+
firstName: "P.D",
41+
lastName: "Woodhouse"
42+
}
43+
},
44+
{
45+
title: "The DaVinci Code",
46+
author: {
47+
firstName: "Dan",
48+
lastName: "Brown"
49+
}
50+
},
51+
{
52+
title: "Angels & Demons",
53+
author: {
54+
firstName: "Dan",
55+
lastName: "Brown"
56+
}
57+
},
58+
{
59+
title: "The Silmarillion",
60+
author: {
61+
firstName: "J.R.R",
62+
lastName: "Tolkien"
63+
}
64+
},
65+
{
66+
title: "Syrup",
67+
author: {
68+
firstName: "Max",
69+
lastName: "Barry"
70+
}
71+
},
72+
{
73+
title: "The Lost Symbol",
74+
author: {
75+
firstName: "Dan",
76+
lastName: "Brown"
77+
}
78+
},
79+
{
80+
title: "The Book of Lies",
81+
author: {
82+
firstName: "Brad",
83+
lastName: "Meltzer"
84+
}
85+
},
86+
{
87+
title: "Lamb",
88+
author: {
89+
firstName: "Christopher",
90+
lastName: "Moore"
91+
}
92+
},
93+
{
94+
title: "Fool",
95+
author: {
96+
firstName: "Christopher",
97+
lastName: "Moore"
98+
}
99+
},
100+
{
101+
title: "Incompetence",
102+
author: {
103+
firstName: "Rob",
104+
lastName: "Grant"
105+
}
106+
},
107+
{
108+
title: "Fat",
109+
author: {
110+
firstName: "Rob",
111+
lastName: "Grant"
112+
}
113+
},
114+
{
115+
title: "Colony",
116+
author: {
117+
firstName: "Rob",
118+
lastName: "Grant"
119+
}
120+
},
121+
{
122+
title: "Backwards, Red Dwarf",
123+
author: {
124+
firstName: "Rob",
125+
lastName: "Grant"
126+
}
127+
},
128+
{
129+
title: "The Grand Design",
130+
author: {
131+
firstName: "Stephen",
132+
lastName: "Hawking"
133+
}
134+
},
135+
{
136+
title: "The Book of Samson",
137+
author: {
138+
firstName: "David",
139+
lastName: "Maine"
140+
}
141+
},
142+
{
143+
title: "The Preservationist",
144+
author: {
145+
firstName: "David",
146+
lastName: "Maine"
147+
}
148+
},
149+
{
150+
title: "Fallen",
151+
author: {
152+
firstName: "David",
153+
lastName: "Maine"
154+
}
155+
},
156+
{
157+
title: "Monster 1959",
158+
author: {
159+
firstName: "David",
160+
lastName: "Maine"
161+
}
162+
}
163+
]

0 commit comments

Comments
 (0)