| 1 | # vue-search-select
|
| 2 |
|
| 3 | A Vue.js search select component with NO dependencies.
|
| 4 |
|
| 5 | + CSS borrowed from <https://github.com/Semantic-Org>
|
| 6 |
|
| 7 | ## Version 2.x
|
| 8 |
|
| 9 | + Support Vue.js 2.x
|
| 10 | + Five Select Component
|
| 11 | + ModelSelect (from v2.3.8)
|
| 12 | + value set through v-model
|
| 13 | + value can be string, number, boolean and object
|
| 14 | + If you v-model type is string, onInput set by string. (Not option object)
|
| 15 | + ModelListSelect (from v2.3.8)
|
| 16 | + value set through v-model
|
| 17 | + Can pass custom list and customize display text to Component
|
| 18 | + Wrap ModelSelect component
|
| 19 | + MultiSelect
|
| 20 | + search select for multiple select
|
| 21 | + MultiListSelect
|
| 22 | + ListSelect for MultiSelect
|
| 23 | + BasicSelect
|
| 24 | + value set through @select event
|
| 25 | + ListSelect
|
| 26 | + value set through @select event
|
| 27 | + Can pass custom list and customize display text to Component
|
| 28 | + Wrap BasicSelect component
|
| 29 |
|
| 30 | ### Version 2.9.1
|
| 31 |
|
| 32 | From v2.9.1 library css extracted standalone file.
|
| 33 |
|
| 34 | There are three file.
|
| 35 |
|
| 36 | + VueSearchSelect.common.js
|
| 37 | + common js bundle for consuming via bundlers(webpack)
|
| 38 | + VueSearchSelect.umd.js
|
| 39 | + umd bundle for browser
|
| 40 | + VueSearchSelect.css
|
| 41 | + extracted css
|
| 42 |
|
| 43 | From v2.9.1 vue-search-select no more need semantic-ui-css. (Demo page wrote without semantic-ui)
|
| 44 | But still semantic-ui-css compatible html and css class use.
|
| 45 |
|
| 46 | If you already use semantic-ui(or formantic-ui) VueSearchSelect.css is unnecessary.
|
| 47 | If you want use vue-search-select without semantic-ui. Just use VueSearchSelect.[common|umd].js with VueSearchSelect.css
|
| 48 |
|
| 49 | *without semantic-ui*
|
| 50 |
|
| 51 | Need css import somewhere in your app.(for example main.js)
|
| 52 |
|
| 53 | ```js
|
| 54 | import 'vue-search-select/dist/VueSearchSelect.css'
|
| 55 | ```
|
| 56 |
|
| 57 | ### ModelSelect
|
| 58 |
|
| 59 | * ModelSelect component's v-model value can be string, number, boolean and object.
|
| 60 | * If you v-model type is string, onInput set by string. (Not option object)
|
| 61 | * This very useful when you want create form. (You don't need additional processing for form value)
|
| 62 |
|
| 63 | ### Release Notes
|
| 64 |
|
| 65 | <https://github.com/moreta/vue-search-select/releases>
|
| 66 |
|
| 67 | # Demo
|
| 68 |
|
| 69 | <https://vue-search-select.netlify.com>
|
| 70 |
|
| 71 | # Usage
|
| 72 |
|
| 73 | ## Install
|
| 74 |
|
| 75 | npm
|
| 76 | ```bash
|
| 77 | npm install --save vue-search-select
|
| 78 | ```
|
| 79 |
|
| 80 | yarn
|
| 81 | ```bash
|
| 82 | yarn add vue-search-select
|
| 83 | ```
|
| 84 |
|
| 85 | ### Install alpha version
|
| 86 |
|
| 87 | ```
|
| 88 | npm install --save vue-search-select@alpha
|
| 89 | # or
|
| 90 | npm install --save vue-search-select@2.9.1-alpha.9
|
| 91 | ```
|
| 92 |
|
| 93 | # Sample code
|
| 94 |
|
| 95 | See All Samples : src/components/sample
|
| 96 |
|
| 97 | ## ModelSelect Component Example
|
| 98 |
|
| 99 | [more ModelSelect sample code see this](https://github.com/moreta/vue-search-select/blob/master/src/views/Model.vue)
|
| 100 |
|
| 101 | ```html
|
| 102 | <template>
|
| 103 | <!-- object value -->
|
| 104 | <model-select :options="options"
|
| 105 | v-model="item"
|
| 106 | placeholder="select item">
|
| 107 | </model-select>
|
| 108 |
|
| 109 | <!-- string value -->
|
| 110 | <model-select :options="options2"
|
| 111 | v-model="item2"
|
| 112 | placeholder="select item2">
|
| 113 | </model-select>
|
| 114 | </template>
|
| 115 |
|
| 116 | <script>
|
| 117 | import { ModelSelect } from 'vue-search-select'
|
| 118 |
|
| 119 | export default {
|
| 120 | data () {
|
| 121 | return {
|
| 122 | options: [
|
| 123 | { value: '1', text: 'aa' + ' - ' + '1' },
|
| 124 | { value: '2', text: 'ab' + ' - ' + '2' },
|
| 125 | { value: '3', text: 'bc' + ' - ' + '3' },
|
| 126 | { value: '4', text: 'cd' + ' - ' + '4' },
|
| 127 | { value: '5', text: 'de' + ' - ' + '5' }
|
| 128 | ],
|
| 129 | item: {
|
| 130 | value: '',
|
| 131 | text: ''
|
| 132 | },
|
| 133 | options2: [
|
| 134 | { value: '1', text: 'aa' + ' - ' + '1' },
|
| 135 | { value: '2', text: 'ab' + ' - ' + '2' },
|
| 136 | { value: '3', text: 'bc' + ' - ' + '3' },
|
| 137 | { value: '4', text: 'cd' + ' - ' + '4' },
|
| 138 | { value: '5', text: 'de' + ' - ' + '5' }
|
| 139 | ],
|
| 140 | item2: ''
|
| 141 | }
|
| 142 | },
|
| 143 | methods: {
|
| 144 | reset () {
|
| 145 | this.item = {}
|
| 146 | },
|
| 147 | selectFromParentComponent1 () {
|
| 148 | // select option from parent component
|
| 149 | this.item = this.options[0]
|
| 150 | },
|
| 151 | reset2 () {
|
| 152 | this.item2 = ''
|
| 153 | },
|
| 154 | selectFromParentComponent2 () {
|
| 155 | // select option from parent component
|
| 156 | this.item2 = this.options2[0].value
|
| 157 | }
|
| 158 | },
|
| 159 | components: {
|
| 160 | ModelSelect
|
| 161 | }
|
| 162 | }
|
| 163 | </script>
|
| 164 | ```
|
| 165 |
|
| 166 | ## ModelListSelect Component Example
|
| 167 |
|
| 168 | [more ModelListSelect sample code see this](https://github.com/moreta/vue-search-select/blob/master/src/components/views/ModelList.vue)
|
| 169 |
|
| 170 | ```html
|
| 171 | <template>
|
| 172 | <model-list-select :list="options1"
|
| 173 | v-model="objectItem"
|
| 174 | option-value="code"
|
| 175 | option-text="name"
|
| 176 | placeholder="select item">
|
| 177 | </model-list-select>
|
| 178 | <model-list-select :list="options2"
|
| 179 | v-model="stringItem"
|
| 180 | option-value="code"
|
| 181 | :custom-text="codeAndNameAndDesc"
|
| 182 | placeholder="select item">
|
| 183 | </model-list-select>
|
| 184 | </template>
|
| 185 |
|
| 186 | <script>
|
| 187 | import { ModelListSelect } from 'vue-search-select'
|
| 188 |
|
| 189 | export default {
|
| 190 | data () {
|
| 191 | return {
|
| 192 | options1: [
|
| 193 | { code: '01', name: 'aa', desc: 'desc01' },
|
| 194 | { code: '02', name: 'ab', desc: 'desc02' },
|
| 195 | { code: '03', name: 'bc', desc: 'desc03' },
|
| 196 | { code: '04', name: 'cd', desc: 'desc04' },
|
| 197 | { code: '05', name: 'de', desc: 'desc05' },
|
| 198 | { code: '06', name: 'ef', desc: 'desc06' }
|
| 199 | ],
|
| 200 | objectItem: {},
|
| 201 | options2: [
|
| 202 | { code: '01', name: 'aa', desc: 'desc01' },
|
| 203 | { code: '02', name: 'ab', desc: 'desc02' },
|
| 204 | { code: '03', name: 'bc', desc: 'desc03' },
|
| 205 | { code: '04', name: 'cd', desc: 'desc04' },
|
| 206 | { code: '05', name: 'de', desc: 'desc05' },
|
| 207 | { code: '06', name: 'ef', desc: 'desc06' }
|
| 208 | ],
|
| 209 | stringItem: ''
|
| 210 | }
|
| 211 | },
|
| 212 | methods: {
|
| 213 | codeAndNameAndDesc (item) {
|
| 214 | return `${item.code} - ${item.name} - ${item.desc}`
|
| 215 | },
|
| 216 | reset1 () {
|
| 217 | this.objectItem = {}
|
| 218 | },
|
| 219 | selectFromParentComponent1 () {
|
| 220 | // select option from parent component
|
| 221 | this.objectItem = this.options[0]
|
| 222 | },
|
| 223 | reset2 () {
|
| 224 | this.stringItem = ''
|
| 225 | },
|
| 226 | selectFromParentComponent2 () {
|
| 227 | // select option from parent component
|
| 228 | this.stringItem = this.options[0].code
|
| 229 | }
|
| 230 | },
|
| 231 | components: {
|
| 232 | ModelListSelect
|
| 233 | }
|
| 234 | }
|
| 235 | </script>
|
| 236 | ```
|
| 237 |
|
| 238 |
|
| 239 | ## MultiSelect Component Example
|
| 240 |
|
| 241 | ```html
|
| 242 | <template>
|
| 243 | <multi-select :options="options"
|
| 244 | :selected-options="items"
|
| 245 | placeholder="select item"
|
| 246 | @select="onSelect">
|
| 247 | </multi-select>
|
| 248 | </template>
|
| 249 |
|
| 250 | <script>
|
| 251 | import _ from 'lodash'
|
| 252 | import { MultiSelect } from 'vue-search-select'
|
| 253 |
|
| 254 | export default {
|
| 255 | data () {
|
| 256 | return {
|
| 257 | options: [
|
| 258 | { value: '1', text: 'aa' + ' - ' + '1' },
|
| 259 | { value: '2', text: 'ab' + ' - ' + '2' },
|
| 260 | { value: '3', text: 'bc' + ' - ' + '3' },
|
| 261 | { value: '4', text: 'cd' + ' - ' + '4' },
|
| 262 | { value: '5', text: 'de' + ' - ' + '5' }
|
| 263 | ],
|
| 264 | searchText: '', // If value is falsy, reset searchText & searchItem
|
| 265 | items: [],
|
| 266 | lastSelectItem: {}
|
| 267 | }
|
| 268 | },
|
| 269 | methods: {
|
| 270 | onSelect (items, lastSelectItem) {
|
| 271 | this.items = items
|
| 272 | this.lastSelectItem = lastSelectItem
|
| 273 | },
|
| 274 | // deselect option
|
| 275 | reset () {
|
| 276 | this.items = [] // reset
|
| 277 | },
|
| 278 | // select option from parent component
|
| 279 | selectFromParentComponent () {
|
| 280 | this.items = _.unionWith(this.items, [this.options[0]], _.isEqual)
|
| 281 | }
|
| 282 | },
|
| 283 | components: {
|
| 284 | MultiSelect
|
| 285 | }
|
| 286 | }
|
| 287 | </script>
|
| 288 | ```
|
| 289 |
|
| 290 | # Props
|
| 291 |
|
| 292 | | Component | Name | Type | Default | Description |
|
| 293 | |-----------------|---------------------|----------|----------------------------|-------------------------------------|
|
| 294 | | ModelSelect | options | Array | | option list |
|
| 295 | | | isError | Boolean | false | error style |
|
| 296 | | | isDisabled | Boolean | false | disable component |
|
| 297 | | | placeholder | String | '' | |
|
| 298 | | | filterPredicate | String | new RegExp(inputText, 'i') | |
|
| 299 | | | customAttr | Function | () => '' | Add custom html attribute |
|
| 300 | | | name | String | | input form name attribute |
|
| 301 | | | id | String | | id attribute |
|
| 302 | | ModelListSelect | list | Array | | option list |
|
| 303 | | | optionValue | String | | value key |
|
| 304 | | | optionText | String | | text key |
|
| 305 | | | customText | Function | | custom text function |
|
| 306 | | | isError | Boolean | false | error style |
|
| 307 | | | isDisabled | Boolean | false | disable component |
|
| 308 | | | placeholder | String | '' | |
|
| 309 | | | filterPredicate | String | new RegExp(inputText, 'i') | |
|
| 310 | | | name | String | | input form name attribute |
|
| 311 | | | id | String | | id attribute |
|
| 312 | | BasicSelect | options | Array | | option list |
|
| 313 | | | selectedOption | Object | { value: '', text: '' } | default option |
|
| 314 | | | isError | Boolean | false | error style |
|
| 315 | | | isDisabled | Boolean | false | disable component |
|
| 316 | | | placeholder | String | '' | |
|
| 317 | | | customAttr | Function | () => '' | Add custom html attribute |
|
| 318 | | | filterPredicate | String | new RegExp(inputText, 'i') | |
|
| 319 | | | name | String | | input form name attribute |
|
| 320 | | | id | String | | id attribute |
|
| 321 | | ListSelect | list | Array | | option list |
|
| 322 | | | optionValue | String | | value key |
|
| 323 | | | optionText | String | | text key |
|
| 324 | | | customText | Function | | custom text function |
|
| 325 | | | selectedItem | Object | | default option(raw object) |
|
| 326 | | | isError | Boolean | false | error style |
|
| 327 | | | isDisabled | Boolean | false | disable component |
|
| 328 | | | placeholder | String | '' | |
|
| 329 | | | filterPredicate | String | new RegExp(inputText, 'i') | |
|
| 330 | | | name | String | | input form name attribute |
|
| 331 | | | id | String | | id attribute |
|
| 332 | | MultiSelect | options | Array | | option list |
|
| 333 | | | selectedOptions | Array | | default option list |
|
| 334 | | | isError | Boolean | false | error style |
|
| 335 | | | isDisabled | Boolean | false | disable component |
|
| 336 | | | placeholder | String | '' | |
|
| 337 | | | filterPredicate | String | new RegExp(inputText, 'i') | |
|
| 338 | | | customAttr | Function | () => '' | Add custom html attribute |
|
| 339 | | | hideSelectedOptions | Boolean | false | Hide Option list that item selected |
|
| 340 | | | name | String | | input form name attribute |
|
| 341 | | | id | String | | id attribute |
|
| 342 | | MultiListSelect | list | Array | | option list |
|
| 343 | | | optionValue | String | | value key |
|
| 344 | | | optionText | String | | text key |
|
| 345 | | | customText | Function | | custom text function |
|
| 346 | | | selectedItems | Array | | default option(raw object) |
|
| 347 | | | isError | String | false | error style |
|
| 348 | | | isDisabled | Boolean | false | disable component |
|
| 349 | | | placeholder | String | '' | |
|
| 350 | | | filterPredicate | String | new RegExp(inputText, 'i') | |
|
| 351 | | | name | String | | input form name attribute |
|
| 352 | | | id | String | | id attribute |
|
| 353 |
|
| 354 | # Run examples
|
| 355 |
|
| 356 | ```bash
|
| 357 | npm install
|
| 358 | npm run serve
|
| 359 | ```
|
| 360 |
|