https://github.com/iliyaZelenko/vue-cool-select

Select with autocomplete, slots, bootstrap and material design themes.
https://github.com/iliyaZelenko/vue-cool-select

autocomplete bootstrap input material-design search searching select vue

Last synced: about 1 month ago
JSON representation

Select with autocomplete, slots, bootstrap and material design themes.

• Host: GitHub
• URL: https://github.com/iliyaZelenko/vue-cool-select
• Owner: iliyaZelenko
• License: mit
• Created: 2018-10-20T09:04:22.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-28T13:51:26.000Z (10 months ago)
• Last Synced: 2024-10-12T09:06:45.228Z (2 months ago)
• Topics: autocomplete, bootstrap, input, material-design, search, searching, select, vue
• Language: JavaScript
• Homepage: https://iliyazelenko.github.io/vue-cool-select
• Size: 8.13 MB
• Stars: 244
• Watchers: 7
• Forks: 33
• Open Issues: 84
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - vue-cool-select - Select with autocomplete with a material theme (Vue / Components)

README

        
  


    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

    

      

    

  


The current version is `3.x`, if you are looking for `2.x`, you can find [it here](README_2VERSION.md) (also, see [breaking changes](https://github.com/iliyaZelenko/vue-cool-select/blob/master/CHANGELOG.md#300-2019-09-18)).

# [Flexible select](https://iliyazelenko.github.io/vue-cool-select) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Vue%20select%20component%20with%20autocomplete,%20slots,%20bootstrap%20and%20material%20design%20themes.&url=https://github.com/iliyaZelenko/vue-cool-select&via=IlyaZelenko&hashtags=vue,bootstrap,developers,github,html,js,web,npm,material-design)



  

  

  

  



## [Demo + Documentation](https://iliyazelenko.github.io/vue-cool-select)

[![](https://i.imgur.com/b7wxLPT.png)](https://iliyazelenko.github.io/vue-cool-select)

## Features

- no dependencies

- props (30) allow you to customize a component in a various ways

- slots (13) allow content to be changed anywhere

- events (8) will let you know about everything

- autocomplete (you can use custom search, you can also disable the search input)

- keyboard controls (not only through the arrows)

- support on mobile devices

- validation, state of error and success

- disabled and readonly

- small and large sizes (as in bootstrap)

- the ability to set your styles, you can write theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design

- TypeScript support

- tab navigation

- SSR (Server-Side Rendering)

- auto determine the suitable position for the menu if it goes beyond the viewport

Write your suggestions, glad to add.

## Installation

`yarn add vue-cool-select` or `npm install --save vue-cool-select`

## Get started

### NPM

1. Import this plugin, css (theme) and add plugin via `Vue.use`:

```js

import { CoolSelectPlugin } from 'vue-cool-select'

// paste the line below only if you need "bootstrap" theme

import 'vue-cool-select/dist/themes/bootstrap.css'

// paste the line below only if you need "material-design" theme

import 'vue-cool-select/dist/themes/material-design.css'

// you can also import your theme

Vue.use(CoolSelectPlugin)

```

2. Use inside another component:

```js

import { CoolSelect } from 'vue-cool-select'

export default {

  components: { CoolSelect },

  data () {

    return {

      // simple example of items

      items: ['Item 1', 'Item 2', 'Item 3'],

      // there will be a selected item

      selected: null

    }

  }

}

```

3. Add to ``:

```vue

```

### Browser (CDN)

Include vue-cool-select in the page.

```html

```

If Vue is detected in the Page, the plugin is installed automatically.

---

Documentation and examples [here](https://iliyazelenko.github.io/vue-cool-select).

#### TODO

- multi-select

- 100% tests coverage

I am happy to add something or improve, you can write what you want to see.

I also have more motivation to work if you give a star, thanks! :smile: