bmsvieira / bvselect-vanillajs Goto Github PK
View Code? Open in Web Editor NEWBVSelect - Vanilla Javascript Fully Customizable SelectBox
License: MIT License
BVSelect - Vanilla Javascript Fully Customizable SelectBox
License: MIT License
Release version is not latest. Check this out
Was looking into this to see if I should recommend it to a friend. Being a11y friendly is always a big deal. I noticed that I cannot use this with keyboard navigation. I cannot open a selectbox with a keyboard trigger and I cannot tab to select boxes.
I get this is your open source project and not making any demands, just saying that accessibility is an important aspect of choosing a select control with actual legal implications in the US (for the site that uses it). You might consider either prioritizing these features or clearly stating the limitation at the top of the readme
Is there a way to a make it work with a class as a selector instead of ID? Awesome script
Hi, will there be support npm package?
When option elements are created dynamicly, the values need to be encapsulated.
Right now, this is not the case, resulting in broken html when values contain spaces.
To fix this, change:
document.getElementById(this.selector).insertAdjacentHTML('beforeend',
"<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value="+properties.options[i].value+" >"+properties.options[i].inner_text+"</option>");
To:
document.getElementById(this.selector).insertAdjacentHTML('beforeend',
"<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value=\""+properties.options[i].value+"\" >"+properties.options[i].inner_text+"</option>");
Need to change the size of the placeholder text, i.e. the word "Search...".
Changes to the parent HTML element does not affect it.
Cheers.
Additional to #1: If the dropdown is opened using mouse click and the search field has been enabled, it the keyboard focus should be set into the search field immediately?
Some things that are important to add:
1 - Aria attributes
2 - Keyboard navigation
3 - Mobile close button (X)
I really like these libraries to create customized fields, but we have to take great care not to forget accessibility.
First of all, thank you for this awesome class.
I have a request / suggestion for a future enhancement:
It would be nice to be able to overrule the html output via the settings.
For example:
I stumbled upon a performance issue when dealing with a list of 1500 items including image previews.
Allthough the image are only a few kb, i t's quite a performance hit.
Therefor I needed to lazy-load them.
To be able to do that I had to modify the source code.
// Check for Attachment
if (optionImg) {
var has_attachment = "<img data-src=" + optionImg + " class='lazyload'>";
}
No big deal ofcourse, but it would be super nice if such alteration could be added to the settings object.
The already selected item is not highlighted in the drop-down list when the list is opened again.
Can this be fixed?
Thanks
How do you retrieve the value of the selected option? I tried adding a change event listener to the select element, but it never seems to activate.
I have loaded the BVSelect JS and CSS files into my Javascript ES6 file and created a #selectbox element.
When I try to use new BVSelect()
it fails with:
Uncaught ReferenceError: BVSelect is not defined
The browser shows that the .js and .css files are loaded succesfully and my code intellisense does pick up the BVSelect class.
Here's my javascript:
$(`
<select id="selectbox">
<option data-separator="true"> Select Option </option>
<option value="1"> Option 1 </option>
<option value="2"> Option 2 </option>
<option value="3" disabled> Option 3 </option>
<option value="4"> Option 4 </option>
</select>`).appendTo(this.$contentDiv);
var demo = new BVSelect('#selectbox');
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.