Ability to add aliases to labels for searching

[yahyaerturan]

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 or europe for example.

[sa-si-dev]

It is an interesting feature to have.

I will work on it in the future release.

Thanks for your suggesion.

[frg]

@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(","),
        }
    });

[yahyaerturan]

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.

[frg]

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' },
  ],
});

[yahyaerturan]

👍 Looks great. Thank you.. Next release will be a loaded gun :)

[sa-si-dev]

@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.

[frg]

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.

[sa-si-dev]

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 or europe 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)