A Vue Component For a Simple Searchable Dropdown

Share Your Love

Here we are going to discuss how to integrate a Vue component For a Simple Searchable Dropdown. Let’s begin

Vue Simple Search Dropdown:

Vue.js simple autocomplete dropdown component.

No external library is used in this dropdown.

How to install Vue Search Dropdown:

npm install vue-simple-search-dropdown

Add On Browser:

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

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.min.js"></script>
<script type="text/javascript">
  Vue.use(Dropdown);
</script>

Module:

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

Usage:

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

<Dropdown
    :options="[{ id: 1, name: 'Option 1'}, { id: 2, name: 'Option 2'}]"
    v-on:selected="validateSelection"
    v-on:filter="getDropdownValues"
    :disabled="false"
    name="zipcode"
    :maxItem="10"
    placeholder="Please select an option">
</Dropdown>

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.

Please wants to improve this article please WhatsApp us.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 429

Newsletter Updates

Enter your email address below to subscribe to our newsletter