vue-multiselect
Universal select/multiselect/tagging component for Vue.js (by shentao)
tom-select
Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc. (by orchidjs)
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
vue-multiselect | tom-select | |
---|---|---|
4 | 6 | |
6,624 | 1,474 | |
- | 2.5% | |
8.0 | 7.6 | |
11 days ago | 20 days ago | |
JavaScript | JavaScript | |
MIT License | Apache License 2.0 |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
vue-multiselect
Posts with mentions or reviews of vue-multiselect.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-09-09.
- Is there a viable alternative for Vue-multiselect that is actively maintained and works with Vue 3?
-
Here's my experience migrating my app from Vue 2 to Vue 3
Besides the above, I removed all my dependencies and installed their Vue counterparts. Some of them do not yet have a stable build so, I installed the Next branch builds. So, if you do not find a Vue 3 compatible version, check the Github pull requests - usually there is one and most of the time the branch is named "Next". You can do something like https://github.com/shentao/vue-multiselect/tree/next
- vue-select alternative for Vue 3?
-
Bundling CSS with vue component as npm pkg?
Example: https://github.com/shentao/vue-multiselect#install--basic-usage. Notice the css import is separate, in ?
tom-select
Posts with mentions or reviews of tom-select.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-10-11.
- Tom-select: vanilla JavaScript select control
-
Glam Up My Markup Contest Submission | Special Effects with backdrop-filter() ✨
This project uses Tom Select, which is licensed under the Apache License, Version 2.0. Tom Select on GitHub Apache License 2.0
-
A comprehensive guide to multi-timezone support in Django
Tip: If you're displaying a long list of timezones, consider using a select element with a search feature(e.g, tom-select) for a better user experience.
-
Hide an API Key from JS code
sorry if it's a dumb question. I'm using tom-select.js (https://tom-select.js.org/) to create various (s) that can use an ajax API call to retrieve/search for options. Since I have to use my own APIs that need an api key, is there a way to protect this key that could be used to access other APIs as well? Thank you
-
How to use tomselect to create and edit a "belongs_to :many relation" with Ruby on Rails
import { Controller } from "@hotwired/stimulus" import { get } from '@rails/request.js' import TomSelect from "tom-select" // Connects to data-controller="search" export default class extends Controller { static values = { url: String, selected: String } connect() { this.element.setAttribute( "autocomplete", "off" ); if (this.selectedValue == 'null') { var selected_json_data = new Array() var selected_items_array = new Array(); } else { var selected_json_data = JSON.parse(this.selectedValue) var selected_items_array = new Array() for(let i = 0; i < selected_json_data.length; i++) { selected_items_array.push(selected_json_data[i].id) } } var config = { plugins: ['clear_button', 'remove_button'], shouldLoad:function(q){ return q.length > 2; }, render: { option: this.render_option, //item: this.render_option item: function(data, escape) { return `${escape(data.email_address)}` } }, loadThrottle: 300, // check this out in search items reload new data-> // https://github.com/orchidjs/tom-select/issues/78 // https://stackoverflow.com/questions/74622800/fetching-data-from-api-to-create-tom-select-options maxItems: 10, maxOptions: 10, valueField: 'id', labelField: 'email_address', searchField: ['email_address', 'first_name', 'last_name'], options: selected_json_data, items: selected_items_array, sortField: { field: "email_address", direction: "asc" }, create: false, load: (q, callback) => this.search(q, callback), } let this_tom_select = new TomSelect(this.element, config) this_tom_select.clearCache() } async search(q, callback) { const response = await get(this.urlValue, { query: { q: q }, responseKind: 'json' }) if(response.ok) { callback(await response.json) } else { callback() } } render_option(data, escape) { if(data.email_address) return ` ${escape(data.first_name)} ${escape(data.last_name)} | ${escape(data.email_address)}
- Tom-select.js: vanilla JavaScript select control
What are some alternatives?
When comparing vue-multiselect and tom-select you can also consider the following projects:
Ajax Bootstrap Select - This uses the bootstrap-select plugin and extends it so that you can use a remote source to search.
Choices.js - A vanilla JS customisable select box/text input plugin ⚡️
Slim Select - Slim advanced select dropdown
stimulus-autocomplete - Stimulus autocomplete component
jQuery-Selectric - jQuery plugin for easy manipulation and customization of HTML selects
ember-power-select - The extensible select component built for ember.
bootstrap-select - :rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.