Code Monkey home page Code Monkey logo

slim-select's People

Contributors

adidd avatar aliazizi avatar ankitkumar755 avatar aza-95 avatar benplum avatar brianvoe avatar bvoelker avatar chofmann98 avatar claudiu-cristea avatar coolibry avatar cozminm avatar damirarh avatar dankrajnak avatar davidwallacejackson avatar dminkovski avatar fudoshiki avatar gabepetersen avatar ggergo74 avatar gmq avatar kapouer avatar lubomirblazekcz avatar martinpeverelli avatar mateuszbialowas avatar orangeswim avatar pluto-dev avatar rguihard avatar rtarnaud avatar stefan-lacatus avatar tqwewe avatar trappist avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slim-select's Issues

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.

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.

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

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.

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.

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.

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?

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.

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.

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

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.

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?

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.

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?

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

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

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.

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)

setData

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

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

onOpen and onClose events

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

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.

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! πŸ‘

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

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

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

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

Select all ability

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

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

Mobile Browsers

Do additional checks into as many mobile browsers as possible.

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

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.

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?

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.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.