A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Overview

Searchable-Select-Dropdown

A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

NPM: https://www.npmjs.com/package/select-typeahead-vue

Installation

If you are using webpack/browserify

import searchableDropdown from 'select-typeahead';
import 'select-typeahead/selectToSearch.css';

new Vue({
  ...
  components: {
    ...
    'searchable-dropdown': searchableDropdown,
    ...
  },
  ...
})

If you are not using webpack/browserify

Add selectToSearch-es5.js and selectToSearch.css to your html file and use the component.

Usage

Pass the select component's id and modelValue (containing text and value keys) as a prop.

<searchable-dropdown replace-with="#native-select-box" :selected-value.sync='selectedData'></searchable-dropdown>

Screenshots

Alt text

Native HTML Select Tag


select usage

VueJS Component


usage usage

You might also like...
Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

A multi-select component with nested options support for Vue.js
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

A component for Vue.js to select double-sided data.
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Vue 3 multiselect component with single select, multiselect and tagging options.
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Simple multi-select component with items displayed in a table like UI
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents 🔨 Installation 📢 Introduction 📢 Basic U

Comments
  • Can't support the async loading options

    Can't support the async loading options

    My select's options is not static existence, it used ajax async loading and update select's innerHTML. The 'searchable-select-dropdown' components only replace at ready. can't detection from real select element

    opened by tbjgod 1
Owner
Rahul Gaba
If you can't explain it simply, you don't understand it well enough.
Rahul Gaba
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
Super awesome select dropdown vue.js component.

v-super-select An accessible and customizable select/drop down component that features searching, grouping, and virtual scrolling. Try out the demo sa

Will 7 Mar 31, 2022
A native-like select field, but better

A native-like select field, but better

Maksym Nesterov 18 Jun 1, 2022
single select dropdown with autocomplete

vue-single-select simple autocomplete select dropdown component for Vue apps for you! Demo Check it out on CodeSandbox What It Does vue-single-select

Rob Rogers 42 Sep 30, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 11 Mar 14, 2022
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 18, 2022
Simple vue tag editor

Simple Vue Tag Editor ======================= Originally inspired a lot by https://github.com/hnakamur/vue.tag-editor.js The code written here is upon

Jihad Dzikri Waspada 8 Feb 14, 2020