choices-js / choices Goto Github PK
View Code? Open in Web Editor NEWA vanilla JS customisable select box/text input plugin ⚡️
Home Page: https://choices-js.github.io/Choices/
License: MIT License
A vanilla JS customisable select box/text input plugin ⚡️
Home Page: https://choices-js.github.io/Choices/
License: MIT License
You talk about a lightweight version but I think it's way to bloated for simple use cases (for example if you just want to use a single select input with search functionality).
Status quo:
chosen.min.js | 28kb
selectivity.min.js | 50kb
choices.min.js | 61kb
select2.min.js | 67kb
It would be nice if it is possible to build an own custom build or (better) you make it modular like selectivity.js.
Pretty self-explanatory, but it probably makes sense to use --save
over --save-dev
when installing a component like this.
Hi,
Appreciate all the hard work going on here! Noticed something a little odd when interacting with the dropdowns with my keyboard; when I attempt to filter a list, the current selected position seems to jump around a bit.
The above is with remote sources, but I've also seen this happen with Multiple Select Input
. Thanks!
Would it be possible to have this plugin work with a disabled attribute so an <option>
can be used as a placeholder? In a traditional <select>
you could do the following to achieve this:
<select id="dropdown-save-to-project" class="form-control">
<option disabled selected>Choose Project..</option>
<option>Project #1 </option>
<option>Project #2</option>
<option>New Project</option>
</select>
When using choices, the <select>
is shown empty until a non-disabled element is selected. I also tried using the built in placeholder/placeholderValue options but could not get it working with a single select input and didn't see any examples on the demo page.
(I also think this would degrade nicely if you opted to use a traditional <select>
for mobile.)
Touchstart is preventing it it seems.
I need to set and get selected element, like we do on select elements, only by send/return the values of selected choice(s).
(Like we do with jQuery : $('select').val(value);
)
Today, if i use setValue() function, I need to pass an object like {value: 'one', label: 'Label One'}
right ?
If so, i'have some issues with it : https://embed.plnkr.co/t48jwB4R7TunhXwcsr5z/
I've done an attempt to demonstrate clearly what i need : yabab-dev@5c8d91d
If you need a PR, ask me.
Thanks for you time !
(And sorry for spamming issues :p)
Hey!
When trying to customize the classNames
object during initialization and only impact a single value, it looks like Choices was blowing up a little and not working as expected until I pasted all the default values and customized one of them. Is the intended behavior to need to dupe all the defaults in this area? Thanks!
Would be super cool if there was a callback for when a tag was clicked so that someone could then trigger the edited state.
Hi,
Using IE11 (with an addition of https://cdn.polyfill.io/v2/polyfill.min.js?features=default,matchMedia,fetch,Element.prototype.placeholder,Array.prototype.includes to hopefully grab everything I'd need to for compatibility since I was seeing fetch
used) the UI isn't responding correctly; selections are not being added to the list of options; they just disappear. Are there any additional deps I should be using to solidify the browser support?
I have something like this:
<label>
<select id='x'>...</select>
</label>
new Choices(document.getElementById('x'))
But I can't click it. I can press spacebar on it just fine, though.
It seems like it opens the dropdown, then closes it immediately:
} else if (this.passedElement.type === 'select-one' && target !== this.input && !this.dropdown.contains(target)) {
this.hideDropdown(true);
}
this
is indeed !== this.input
. and this.dropdown
indeed doesn't have target
:
What happens here is that two click
events happen.
when we try to use choices.js with requirejs the lib is loaded but, no return is provided.
To demonstrate the problem I have created a sample project to show how I am trying to use choices with requirejs
https://github.com/herbertpimentel/choicesjs_test
to run this you just need:
Install bower globally using npm
> npm install -g bower
Install the bower dependences
>bower install
As I hove you will see choices is successful loaded but I receive a message TypeError: Choices is not a constructor... when I try to use it.
maybe it is something with webpack export. I am very curious about it
And trim()
can throw an error if the array of choices have integers as values.
When on mobile the drop down should only flip if there is no space beyond the document height rather than the viewport height. This avoids the drop down changing between being above and below the input when a choice is selected. The search should also always be visible within the viewport (possibly scroll to the input upon focus).
First, thanks for 'choices' option
I made a function to do the same with ajax() but without callback.
Can you watch it ?
Here it is : yabab-dev@02a7144
Feel free to close if you don't want it ;)
There is a bug in the library that causes the first option in a select-multiple element to always be selected when the Choices object is initialised.
This is where it happens (line 1864 of src/choices.js)
// Join choices with preset choices and add them
allChoices
.concat(this.presetChoices)
.forEach((o, index) => {
if (index === 0) {
this._addChoice(true, o.disabled ? o.disabled : false, o.value, o.label);
} else {
this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);
}
});
The if (index === 0) {
should be changed to take into account the select element type, like it does elsewhere in the script. i.e.
if (index === 0 && this.passedElement.type === 'select-one') {
Sorry I can't give you a patch but after wasting an hour or so unsuccessfully trying to get node.js and a long list of dependencies installed (webpack, eslint, opn, babel etc etc etc) so I can build a non-minified script that executes, I gave up and just edited the minified version instead. I'm not sure if "this" will work in the closure but the minified version inserts a named variable "e" pointing to "this" which does work.
It would be great if you could include a fully compiled, non-minified, source script in the distribution so that we can easily debug without having to mess around with node.js and/or reverse engineering the minified version. Thanks.
On the demo page if you tab through each input, the single select box without search does not close on blur.
Using a library such as syn to test events should be a thing!
For instance:
.choices__group .choices__heading {
...when you can just use .choices__heading
. I typically restyle Choices.js to fit the project I'm working on, and using less-specific CSS selectors would help a lot.
When I am setting a placeholder, my expectation is to see the placeholder on the select element and not on the search input when clicking the select box.
How can I set a placeholder for the users to see when there is no value selected?
My example plunker:
plunker
Thanks. ( By the way awesome plugin )
There is a way to get the value of the group?
const example = new Choices(ele);
example.setChoices([{
label: 'Personal',
choices: [
{value: 'Child One', label: 'Child One'},
{value: 'Child Two', label: 'Child Two'}
]
},
{
label: 'Internet',
choices: [
{value: 'Child One', label: 'Child One'},
{value: 'Child Two', label: 'Child Two'}
]
}], 'value', 'label');
}
So for example here when I click on item in the Personal group I need to know the group name.
On https://joshuajohnson.co.uk/Choices/ under "Email addresses only" type the following
the "Hit enter to" will appear, but just hit backspace to make the text input look like
And the "Hit enter to" will still be there but hitting enter won't do anything which is a bit confusing.
Hi,
I'd like to add a server-side filtering feature which would fetch data as the user inputs text (with a 'minChars' and a 'delay' properties).
Is that something that you plan to add in a future release ?
Thanks
Maybe a bug only a select-one element, but when I use setValue() to set choices on my select they appear in the wrong orders .
Demo (#choices-2 and #choices-3) : https://embed.plnkr.co/hVyjk5z2lJZorqOi48e6/
Label Three appear in second position, and is selected by default :(
Frameworks like Vue.js rely on certain DOM nodes to not be removed by third-party code to work properly. (See vuejs/vue#3302). I think simply hiding the original DOM node would be a better option here. Thoughts?
Is it possible to mix multi-select with the users ability to add custom items? Or alternatively, give the text field some predefined suggestions in the style of the multi-select?
I've tried setting the choices
option when targeting a text field, but it doesn't seem to work.
Hi there,
Choices looks like what I've been looking around for so long! Thanks for making it.
There are multi-select dropdowns, is there a way to have those options within a multiselect to be checkboxes instead of the current DIVs under a tag?
Thanks!
It would be really nice to have a feature to make dependent dropdowns. For example, let's imagine we have 2 dropdowns:
Just an idea, but I would really love a functionality like this since mostly all of the existing solutions require jQuery.
Hey!
Currently when instantiating Choices, you can impact the naming of the UI classes, but https://github.com/jshjohnson/Choices/blob/master/assets/styles/scss/choices.scss doesn't have a way to override these selectors if you'd like to keep the base styles (as far as I can see). Would you be up for a way to plug into these values? It'd look something like this:
$choices-selector: 'choices' !default;
.#{$choices-selector} {
color: blue;
}
It's something I could look into if you're interested.
Hi!
I noticed you're currently using https://github.com/jshjohnson/Choices/blob/master/assets/scripts/src/lib/polyfills.js to handle polyfills for a few helper plugins. Wanted to get your thoughts around removing these and letting the end-user decide more on its implementation for compatibility. I wrote a little bit about the subject here which outlines using a tool like http://polyfill.io to handle these additions for you.
Trying a simple destroy() and then init() won't work...
Hey.
I want to ask if there is a simple way to replace multiple selects but working like default? The input and badges are not the most elegant way each time.
Here is an example how i want to have it:
https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes
Maybe there is a way to do this.
Thanks and best regards
It's more a enhancement than a bug.
Can we have a button to clear current selection on select-one element ?
Like chosen does : https://harvesthq.github.io/chosen/#allow-deselect-on-single-selects
Thanks !
Is there a easy way to just set height/width ?
Or get it to follow the select you add it too?
Or do you have a bootstrap theme so it really looks like it belongs with the rest of the form elements?
Thx, looks really cool, love its vanilla js
From the description in the readme, it seems like the callbackOnChange
callback should be called when an item is added or removed via any sort of user-input. Currently removing an item only triggers it if an item is removed using the button, not if it is backspaced.
Seems like it should be called after line 817.
Any chance you've used this inside another react+redux application? if so how? i've tried importing it and using it htat way but i get unexpected token inport errors?
Is it be possible to make a other request to fetch API in case no results found and to pass the entered value as argument and offer the response as new select data? If yes exist any example?
As is now it preloads the data and the user can select from this initial data fetch. In a case where many records exist, this is not the ideal solution.
...or leaving choices.js
as the "main"
entrypoint, instead of choices.min.js
.
This lets others debug properly :)
I saw your post on /r/coolgithubprojects. I noticed on your demo page, using Chrome 52.0.2743.82
, that selecting text doesn't work with the mouse. I can use the keyboard (shift + arrow keys), and Select All
from the context menu, but the only mouse functionality available is focus
. It won't even move the cursor around between characters.
Hi!
Not necessarily a bug, but a difference in behavior than other browsers - when selecting a single-select in IE11, the dropdown remains open, compared to Chrome, Firefox, and Safari (latest) it's closed on selection. I'll see if I can spot anything unless you come across anything quicker. Thanks!
If a user is scrolling on a touch device, the touch start event shouldn't trigger. It should only trigger if it was a single tap.
Will be very appreciated if you publish this also as a bower module.
The main dist file doesn't export a useful value. It simply gives you {}
.
import Choices from 'choices.js'
new Choices() // Error: Choices is not a function
console.log(Choices) // => Object {}
Same effect with require()
.
var Choices = require('choices.js')
new Choices() // Error: Choices is not a function
console.log(Choices) // => Object {}
What it actually does is export window.Choices
. This works, contrary to commonjs expectations:
require('choices.js')
new window.Choices(element)
cc @akosipc who first encountered this bug.
Me again for an enhancement ;)
callbackOnAddItem and callbackOnRemoveItem are called when choices are added to the select list.
I've made another callback which is called only on user inputs : yabab-dev@57c241a
Thanks !
Because this.input
is hidden.
Dirty solution : yabab-dev@e8a5158
Hi,
First : awesome library !
I'm trying to make a angular 2 wrapper of your plugin and I think I've spotted some bugs, first of them, the config "items" seems to not work with a select-one element.
Here is a demo (#choices-1) : https://embed.plnkr.co/hVyjk5z2lJZorqOi48e6/
The list remain empty.
Maybe I don't use this variable correctly ?
(I've grouped all bugs on the same plunker, I'll do a different issue for other bug)
Thanks !
Not sure if this would be possible but it'd be SUPER cool if you exported a react component as well.
Wanted to use this with remote data, Im prb just using it wrong
But what I wanted to repopulate the dropdown when trying into the search box
Nothing have to be changed without user selection a row
Thx
this.Choices = new choises(this.element,{
callbackOnChange : (value) => {
//this triggers, ok
},
callbackOnSearch : (value)=>{
//this triggers, but setvalue cant be used, it just adds all the time, and set input value to one of the rows
//tried setChoises to but nothing happend
}
});
Hey!
Wanted to bring up more a discussion rather than an issue, but I recently read through https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/ which had some interesting insights into some of the extra "stuff" Webpack can wrap around your code which can sometimes lead to larger file sizes - and wanted to get your take. About to do some integration work with Choices to replace Chosen (which relies on jQuery), but noticed the distributed size is about the same of both Chosen and jQuery combined - and it came across a little odd. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.