Comments (8)
👍 Looks great. Thank you.. Next release will be a loaded gun :)
from virtual-select.
It is an interesting feature to have.
I will work on it in the future release.
Thanks for your suggesion.
from virtual-select.
@yahyaerturan This functionality has been added in #7 however since this plugin does not deal with importing the options from the DOM directly you'll have to query and parse the terms manually.
const select = document.querySelector("#select");
const options = Array.prototype.slice.call(select.options)
.map(x => {
return {
label: x.text,
value: x.value,
terms: x.getAttribute("data-aliases").split(","),
}
});
from virtual-select.
If I get it right, this will result in a second mapping of json data as we set options by json when initializing? The html I wrote here as a sample of final output. Will this be done after initializing virtual select? More generic solution might be defining searchable json keys when initialising and leave the rest to the backend.
from virtual-select.
The html I wrote here as a sample of final output.
This plugin does not generate a select HTML element which means it also does not generate option HTML elements.
You would initialize the plugin as shown below
VirtualSelect.init({
ele: '#sample-select',
options: [
{ label: 'Options 1', value: '1', terms: ['london', 'england'] },
{ label: 'Options 2', value: '2' },
{ label: 'Options 3', value: '3' },
],
});
from virtual-select.
@yahyaerturan This functionality has been added in #7 however since this plugin does not deal with importing the options from the DOM directly you'll have to query and parse the terms manually.
const select = document.querySelector("#select"); const options = Array.prototype.slice.call(select.options) .map(x => { return { label: x.text, value: x.value, terms: x.getAttribute("data-aliases").split(","), } });
@frg, it is not recommanded to read data from DOM element. The main problem, this plugin trying to solve is, reduce the no.of DOM element.
It is good to handle data in JS object for better performance.
from virtual-select.
I agree, if I understood @yahyaerturan correctly by his example he already has a select element on his page which he's like to convert to using the plugin. I could have misunderstood.
from virtual-select.
Great plugin, thank you.
It would be really nice to add aliases to labels for searching. I am using this library instead of bootstrap-select with BS5.
<option value="27" data-aliases="turkey,middle east">Istanbul</option> <option value="43" data-aliases="england,united kingdom,europe">London</option>
This is the final html I proposed. We should be able to find "London" option when we type
england
oreurope
for example.
@yahyaerturan as you requested, we have implemented the feature to allow using alias for searching.
This feature is available in the release v.1.0.3 (more details)
from virtual-select.
Related Issues (20)
- onChange event is fired twice when you change value after using search HOT 6
- Limit minimum number of selected values
- regression : search input is disabled if options are lazily loaded when the dropdown is displayed HOT 14
- Destroy method does not properly remove the event listeners HOT 1
- Dropbox has blurry borders in Chromium browsers HOT 2
- when using server search, disableSelectAll doesn't work HOT 6
- When using popup mode and preselected values make the focus go to the dropdown when entering the screen
- The "disabled" property doesn't account for the tabindex. HOT 7
- Inline Style Css Properties is not Showing HOT 1
- Add property in the documentation HOT 1
- deselectAllOnlyVisible feature HOT 1
- Broken display of options with icons HOT 4
- Add classes to button HOT 3
- The search input is disabled when allowNewOption is set to true and the options are empty. HOT 5
- Search Feature Unresponsive After Setting an Empty List of Options HOT 3
- Scrolling is broken when a custom onServerSearch function Is defined HOT 10
- The reset() method is triggering on change event and causing an infinite loop when used on certain contexts HOT 1
- Custom values in onServerSearch are not respected HOT 1
- Scrolling gets stuck in Safari when multiple select has options selected HOT 2
- why i get the wrong in browser console: index.vue:62 Couldn't initiate Virtual Select HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from virtual-select.