https://github.com/romainsimon/vue-simple-search-dropdown

:eight_pointed_black_star: Vue.js simple autocomplete dropdown component
https://github.com/romainsimon/vue-simple-search-dropdown

component dropdown vue vuejs

Last synced: 1 day ago
JSON representation

:eight_pointed_black_star: Vue.js simple autocomplete dropdown component

• Host: GitHub
• URL: https://github.com/romainsimon/vue-simple-search-dropdown
• Owner: romainsimon
• Created: 2018-06-09T14:34:34.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T07:48:39.000Z (over 1 year ago)
• Last Synced: 2024-11-07T06:24:33.112Z (9 days ago)
• Topics: component, dropdown, vue, vuejs
• Language: Vue
• Homepage: https://romainsimon.github.io/vue-simple-search-dropdown/
• Size: 21.5 KB
• Stars: 97
• Watchers: 4
• Forks: 63
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# vue-simple-search-dropdown

A Vue component for a simple searchable dropdown.

No external library is used in this dropdown.

### Demo

Demo here: [https://romainsimon.github.io/vue-simple-search-dropdown/](https://romainsimon.github.io/vue-simple-search-dropdown/)

## Installation

```js

npm install vue-simple-search-dropdown

```

### Browser

Include the script file, then install the component with `Vue.use(Dropdown);` e.g.:

```html

  Vue.use(Dropdown);

```

### Module

```js

import Dropdown from 'vue-simple-search-dropdown';

```

## Usage

Once installed, it can be used in a template as simply as:

```html

```

### Options

- `options` (required): An array of options with `id` and `name`

- `placeholder` (optional): A placeholder 

- `disabled` (optional): true/false

- `name` (optional): An input name | default: `dropdown`

- `maxItem` (optional): Max item to show | default: `6`

### Events

These events are returned from the dropdown and can be catch with `v-on`

- `selected`: An option is selected by click in the dropdown

- `filter`: A filter has been applied by typing in the input field

Tips: Using `v-on:filter`, you can repopulate the dropdown with new `options` corresponding to the search by making an API call