brianvoe / slim-select

Slim advanced select dropdown

Slim Select 2

slimselectjs.com

Advanced select dropdown

Support

Documentation and Examples

See website for the full list of settings, methods and event callbacks

Features

• No Dependencies
• JS: 29kb - 5kb gzip
• CSS: 7kb - 1kb gzip
• Single Select
• Multi Select
• User Addable Options
• Html Options
• Settable Data
• Callback Events
• Placeholders
• Search
• Disable Options
• Light CSS
• Light Color Scheme
• Style and Class Inheritance
• Clean Animations
• Performant
• Typescript

Frameworks

• Vue

Installation

npm install slim-select

or

<script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/slim-select@latest/dist/slimselect.css" />

Simple Usage

import SlimSelect from 'slim-select'

new SlimSelect({
  select: '#selectElement',
})

<select id="selectElement">
  <option value="value1">Value 1</option>
</select>

Data

Data is an array of objects that represent both option and optgroups.

See below for list of data types

new SlimSelect({
  select: '#selectElement',

  // Array of Option objects
  data: [{ text: 'Value 1', value: 'value1' }],

  // or

  // Array of Optgroups and/or Options
  data: [{ label: 'Optgroup Label', options: { text: 'Value 1', value: 'value1' } }],
})

Data Types

// <optgroup>
var optgroup = {
  label: 'label', // Required
  selectAll: false, // Optional - default false
  closable: 'off', // Optional - default 'off' - 'off', 'open', 'close'
  options: [], // Required - value is an array of options
}

// <option>
var option = {
  text: 'text', // Required
  value: 'value', // Optional - value will be set by text if not set
  html: '<b>Html</b>', // Optional - if set, used for display purposes
  selected: false, // Optional - default is false
  display: true, // Optional - default is true
  disabled: false, // Optional - default is false
  mandatory: false, // Optional - default is false
  placeholder: false, // Optional - default is false
  class: '', // Optional - default is not set
  style: '', // Optional - default is not set
  data: {}, // Optional - If you have data attributes
}

Settings

Settings are a list of fields that help customize how SlimSelect operates

new SlimSelect({
  select: '#selectElement',

  settings: {
    // Below are a list of optional fields
    // their values are the defaults
    disabled: false,
    alwaysOpen: false,
    showSearch: true,
    focusSearch: true,
    searchPlaceholder: 'Search',
    searchText: 'No Results',
    searchingText: 'Searching...',
    searchHighlight: false,
    closeOnSelect: true,
    contentLocation: document.body,
    contentPosition: 'absolute',
    openPosition: 'auto', // options: auto, up, down
    placeholderText: 'Select Value',
    allowDeselect: false,
    hideSelected: false,
    showOptionTooltips: false,
    minSelected: 0,
    maxSelected: 1000,
    timeoutDelay: 200,
    maxValuesShown: 20,
    maxValuesMessage: '{number} selected',
  },
})

Events

Events are function callbacks for when certain actions happen

new SlimSelect({
  select: '#selectElement',

  events: {
    search: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
    searchFilter: (option: Option, search: string) => boolean
    addable: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
    beforeChange: (newVal: Option[], oldVal: Option[]) => boolean | void
    afterChange: (newVal: Option[]) => void
    beforeOpen: () => void
    afterOpen: () => void
    beforeClose: () => void
    afterClose: () => void
    error: (err: Error) => void
  },
})

slim-select's Issues

HighLight Issue when Using html Code

There is a highlight Issue if you use html code. It shows the whole code and not only the visible text.
This can be fixed by changing the line 1739 inside option function as follows:

option.innerHTML = helper_1.highlight(data.text, this.main.slim.search.input.value, this.main.config.searchHighlighter);

The change is in from data.innerHTML to data.text.

I have also added a possibility (if the parameter is set) of deleting the tag by clicking on it, instead of the X only.
If you are interested ask me to push my code somewhere.

Enter submits instead of picking highlighted item

I am not sure if that is the intended behaviour or a bug: I start typing, press cursor down to highlight the wanted item and press enter to pick it. But instead of adding it to the collection the whole form is submitted. I think this is confusing. 💫

Nevertheless, great work and thanks for sharing! 👍

onChange Event is called twice when element changed

Whenever the version of SlimSelectJs version you used, the "onChange" event is called twice when element changed.

Very simple example using latest SlimSelectJs Lib (1.4.3).
https://jsfiddle.net/0yqfabm8/

Error on rendering multiple select element with many elements selected

When I try to apply slim-select to multiple select element with many preselected items, it throws following error:

Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. (logical-mutation.js:34)

It happens in Firefox and Edge desktop browsers.

Example select element that I'm talking about:

<select id="property" name="property" multiple>
  <option value="office">Office</option>
  <option value="retail" selected="selected">Retail</option>
  <option value="liquidStores" selected="selected">Liquid Store</option>
  <option value="restaurant">Restaurant / Cafe space</option>
  <option value="sportFacility" selected="selected">Sport facility</option>
  <option value="industrial">Industrial / Warehouse</option>
  <option value="gas">Gas/Service Stations</option>
  <option value="showrooms">Showrooms / Bulky Goods</option>
  <option value="hotel">Hotel / Leisure</option>
  <option value="medical">Medical</option>
  <option value="hospitals">Hospitals</option>
  <option value="liveWork">Live/Work</option>
  <option value="religious">Religious Facilities</option>
  <option value="schools">Schools</option>
  <option value="college">Colleges and Univiersities</option>
  <option value="entertainment">Entertainment Uses</option>
  <option value="driveThrough">Drive-Through Facilities</option>
  <option value="garage">Garage</option>
  <option value="land">Vacant Land</option>
  <option value="other">Other</option>
</select>

It doesn't always occur, but when it does, you can still open slim select and when you select an additional item, initially selected options appear.

It looks like an interference with WebComponents library that I also use https://github.com/webcomponents/webcomponentsjs

Search Placeholder

Allow the ability to change the text in the search placeholder

Styling doesn't honour the initial select state.

When the initial state of the select is disabled the slimselect doesn't apply the proper styling.
Example:

A select like this:

<select id="my-select" disabled="disabled">
	<option value="1">Value 1<option>
	<option value="2">Value 2<option>
	<option value="3">Value 3<option>
</select>

<script type="text/javascript">
	var select =  new SlimSelect({
		select: "#my-select"
	});
</script>

Will not have a the background greyed.

However if after instantiate the select.disabled(); is called the proper styling is applied.

onOpen and onClose events

Can you add onOpen (onBeforeOpen/onAfterOpen) and onClose (onBeforeClose/onAfterClose) events?
Currently, there are only beforeOnChange and onChange.

Allow dynamic entries on beforeOpen

If beforeOpen returns an array/promise, it should be added dynamically to the list.

I have selects that load the content lists when i open a select.
Currenly i found only your search option to load entries via ajax.

Not all text fields could be changed (e.g. for translation), can you add them to the options?

Tabbing in Safari

Users get trapped in the select when tabbing in Safari.

Use multiple selected values

How do i populate an array with only the selected values of a multiple select instance? I could'nt get the value i wanted using the onchange: object.

Provide demos

Hi.
I really liked slim-select. It's light and clean but didn't fully understand how to use it.
If you provide us jsfiddle or codepen demos, it would be better to play with it.

Also, why this does't work?

List does not scroll to set value

The list of select options does not scroll to new value when using myselect.set(value) or when using option allowDeselect=true.

My use case has about 40 options. The first option is a default which has an empty string value.
When I reset my form, I call myselect.set("") to reset the slimselect, as well.

The result is that the visible part of slimselect shows the first item correctly, but when opening the dropdown, the scroll position remains at previously selected value ... which could be at bottom of list.

Tab focus when disabled

Users can still tab and change the value when the select is disabled. What about a check to see if the select is disabled before opening it (https://github.com/brianvoe/slim-select/blob/master/src/slim-select/create.ts#L290)?

Mobile Browsers

Do additional checks into as many mobile browsers as possible.

Multi Slim Select based on ajax result

Also related to #31
It would be nice if ajax requests can be used for the multi select since i do this aswell :) .
At the moment i fix it with

• .find('option:not(:selected)').remove(); -- remove all none-selected values
• .append(options) -- add new options to the select

Would be nice to replace all none selected values with the ajax results for the multi select so the selected options don't get removed.

IE 11 error - Object doesn't support this action

When opening http://slimselectjs.com in IE11, and changing the dropdown, an error shows:

Object doesn't support this action

This is referring to this line

this.element.dispatchEvent(new Event('change'))

There is a possible fix on SO here.

Allow user to cancel an onchange event

If the user sets an onchange handler, and their handler returns false, slim-select should not apply the pending change. If the user returns nothing (or any non-false) value, proceed normally.

How to count select tag

Hi author ,
How to I can count select tag after click more 30 option .
It's very long string tag
Can I display sum of number select tag like : (30 selected) on input
Thank and best regards

Deselect the selected value

Hi,

I would like to know how I clear the selected value in the slim?

I can not remove.

Slim Select based on ajax result

Hello,

Info :
I would like to use the slim select combined with ajax results.
The reason i do an ajax request is because i have several 1000 records based on a different input field(country selection).

Situation :
Event : " .find('input').on('keyup',...)"
Execute : Ajax call -> change options

Problem :
The select has a "ss-list" with all the options, these have a "data-ID".
I always do a ".setData" when any "keyup" event happens in the input from the select, because of this all the "data-ID" are always different (I will ofc only do this request at +- 3 char).
The mayor issue that i have at the moment is that the slim-select is not synced with itself.
I mean that it seems that the slim-select has like an array that has all the data-ID and this sync on every keyCode with a CHAR but after a change i update it with the return value with my ajax results.
So the js values are always 1 step behind the html values, atleast that's how it feels.

Example
1 ) 1 option -> data-ID = 100;data-ID = 110;
2) Extra key input "a"
3) Select syncs, data-ID = 100;data-ID = 110;
4) Ajax request (input field has changed)
5) Setdata, data-ID changes in the list -> data-ID = 200;data-ID = 210
6) Choose value, option 200 -> list = 200, select = 100
7) Result -> 200 is not known so "null" has been selected
8) Open search field
9) Select syncs -> data-ID = 200;data-ID = 210
10) Choose value -> list = 200, select = 200
11) Result -> 200 is known so return selected value the "span"

Conclusion
It seems like the slim-select always syncs on a change (visible key) or open/close.
Can i maybe call this function after my ".setData" so the ss-list syncs with the js data?

Greetings aro

Dynamic load options when scroll select

Does not work in nwjs

Does not work in Node Webkit (nwjs) when installed as a node module and then imported via "import ... from" or "require". However, using the .js file and .css file directly does work.

setData

Only when using setData method does slim options list not reflect properly.

setSelected instead of set ?

Hi,

first thanks for your work, your js select really rock ! ;o)

I just have a question : why did you choose to have a method named "set" to set selected items instead of "setSelected" as you have done to get selected values (=> getSelected()) ?

Thanks for your reply.
Antoine.

Retrieve selected data

Hi @brianvoe ,

Thanks for this great piece of work.

I'm trying to send the user selected option through AJAX each time he add or remove an option.
I can't figure out how to retrieve the options selected by the user...
Do I missed something ?

Thanks per advance,
Thibault

The change event triggered on the original select doesn't bubble

Hi @brianvoe ,

Thanks for the great work on this component.
I was wondering if it wouldn't be better to make the change event triggered on the original select bubble, just like the original change event would do? I was delegating my event listeners and noticed that the event doesn't bubble.

Thank you
All the best

Select all ability

is there any option for select all values in multiple mode? How can i do that ?

Allow to set a different selected text from the one in the option

Hi,

I wonder if it's possible to display a different text in the unopened select element from the one in the option. In my case I use innerHTML to populate the option, but I would like to have a different text in the selected box (the element with class "placeholder").

You seem to hint that this is possible in the documentation (http://slimselectjs.com/options , the innerHTML section). For a data point such as {innerHTML: 'Slim Select you are awesome', text: 'Slim Select awesome'} , I would like to display the value in the 'text' property ("slim select awesome") in the select box. Instead, in all selects, even when I have valuesUseText set to true, the text inside innerHTML ("Slim Select you are awesome") is displayed.

This can be useful when you have alot of text inside innerHTML (in my case 4-5 lines of text) that would look bad when inlined.

Thank you

Text input field does not displayed if user double click on the dropdown.

This issue happens for the IE11 and MS Edge users.
STR:

• double click on the dropdown
• pay attention that cursor started blinking under the dropdown
• type some text, cursor will be moving, but text is not visible
• click on the dropdown and you will see text that you entered

Get Slim object dynamically

Let's say that i have 10+ slim selects on my page.
I don't want to store them in a var but i want to get the slim object dynamically.

For example : ".find('select[name="blabla"])"
How do i get the slimselect object so i can use ".set()" to change the selected option?

I don't want to re-create the slim select to change the data:
var select = new SlimSelect({
select: .....find('select[name="blabla"])
})
select.set(newVal);

Regarding dist files

To allow source files to be identifyable in source-mapped stack traces it would be beneficial to name them like the project. Also, I recommend including both minfied and unminfied files as there are use cases for both, so ideally you would have these dist files:

slim-select.js
slim-select.css
slim-select.min.js
slim-select.min.css

Allow to customise the search placeholder text.

Currently is possible to customise the searchText which is actually the text for when the search doesn't return any information but the search placeholder text (in the image the text Search) is not customisable.

Would be nice if was possible to customise it for a better I18n adherence.

innerHTML vs text/value

Hi,

Thanks for this work. It’s a beautiful piece of UI.

From what I get yet, there is no way to show different texts in the ss-multi-selected and the ss-list.
To be clearer, I use innerHTML to display 2 spans in the ss-list (to mimic label in dataList), one justify left, one right. When I select an item, it is shown as a concatenation of the content of the spans. Is there a way to use the .text property of the data instead of the innerHTML, for the ss-multi-selected > ss-value part, as it is clearly a text only display ?

Thanks again for your work,
Tell me if this is not clear.

Ogier

onChange returns alphabetically sorted values

The onChange method returns alphabetically sorted values. Shouldn't it return the values in the same order as displayed?

Feature Request - Specify Opening Direction (Upwards or Downwards)

Currently when a multi-select is opened, it toggles between opening upwards and downwards. (IE the first click, it slides up. Next time it's opened, it slides down. Then up, then down, etc) It would be wonderful to have an option to specify opening direction. (And also thank you for this script, it's really awesome)

Since version 1.5 current value is incorrect

I use slim-select with Parsley.js validation library. It used to work great in version 1.4.1.
After an update to latest version 1.5.1, validation doesn't work properly.

Validation occurs in "change" event. After changing value in slim-select, previous value is taken into account, not the current one, i.e. If I change from "None" to "Something", in "change" event shows that value "None" is selected, I expect that it says "Something".

placeholder is removed if called with setData

I am trying to add/remove options at runtime by calling setData, but then it removes placeholder. and also it automatically selects first element, I would like user to select it manually.

Null Value Errors

If no selected value can be found, errors are thrown:

https://github.com/brianvoe/slim-select/blob/master/dist/slimselect.js#L306
https://github.com/brianvoe/slim-select/blob/master/dist/slimselect.js#L398

Seems like these lines are being compiled incorrectly:

https://github.com/brianvoe/slim-select/blob/master/src/slim-select/index.ts#L134
https://github.com/brianvoe/slim-select/blob/master/src/slim-select/index.ts#L215

Addable

Hi,

so I worked on adding an "add" option function on slim-select.

When a user search for something and press enter it is added as-entered.

I have made a lot of progress but being unfamiliar with typeScript I am unable to finish. When adding many elements they sometimes appear doubled.

If this options interest you I would love to ask for help on my implementation.

to test simply build and run addable.html

...

var slim = new SlimSelect({
        select: '.select-multiple',
        addable: true
      })

...

Please refer yourself to the additional commit on my fork

pywebdesign@ffc3ddd

Thank you for this amazing tool

Set max number for multiple select

Is there a way to limit the number of selections from the multiple select?

Addable should accept an object as return.

Hi,

Shouldn't the 'addable' function accept an object as return?
A common use case is that the value of the option usually is different from its text. Like case where we load data from database and the value is a numeric filed and the text, well, is text (string)?

Currently, the addable function is expected to return a text or a boolean, there is a workaround for the case which a new entry on the database on addable and then its id needs to be associated to the new option create?

Getting a selected value

Hello there,

I'd like to use slim select for my dropdown component.
Is there any way to get selected value(s) for single/multiple dropdown? I don't see have method that I can call to get the values.
How can I get selected values?

Clear a select by call a method

I have 2 depending selects. When i change one, the other should be cleared.
When i call setData([]) the previous Items are still there.

Templates with <optgroup>

Is it it possible to use item templates with <optgroup> ?

[Mobile] The keyboard always show up on mobile even with {showSearch: false}

Hi @brianvoe ,
If you open http://slimselectjs.com/options on your phone and open the showSearch:false example, the keyboard shows up which is unpredictable behavior. it seems you just hide the search field without disabling the focus event 😄.

Thanks for the great plugin and i hope you fix this issue ;)
Have a great day

Keyboard support

I'm seeing a couple issues when trying to use the selects with keyboard:

1. With single-select, as soon as I choose an option, it appears as if the widget has lost focus, and there is no way to expand it again unless I tab out and then shift-tab back in (or vice versa). I think what's going on is that the option is actually still holding on to the focus. If I hit the down arrow key, I don't see a change, in the select's value, but if I then press Return, the next option's value appears.

2. With multi-select, I can't figure out how to remove an option (using the keyboard) that I've already selected. I can only select additional options. Maybe I'm missing something here?

Thanks for the widget.

How to get selected value with multi selects?

When i call onChange, i can't get selected value with multi select. Can you show me how?

https://jsfiddle.net/amm9d5d3/

Edit: This works but after selecting an option, it fails.

CDN links are broken

CDN links for inline loading of the js and css file are broken. 404 error.

Detect all values get deleted on multi dropdown

Is there any API to detect when all values get deleted on multi dropdown? I need to trigger when that happened.

add value twice through "addable" option

Hi,

I love this plugin, it fits my require for multiselect.
But the value will add twice when I add value through "addable" option. There is an issue #12 already.
Can you help for this issue? Thank you so much.