brianvoe / slim-select Goto Github PK

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

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

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

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

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.

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

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.

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.

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.

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.

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

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?

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

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

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

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

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

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.

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?

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/

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

Allow the ability to change the text in the search placeholder

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.

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.

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

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.

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.

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

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! 👍

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)?

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

Do additional checks into as many mobile browsers as possible.

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

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.

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

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

Users get trapped in the select when tabbing in Safari.

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?

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

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.

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

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)

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.

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.

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

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

Hi,

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

I can not remove.

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?

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);