dbrekalo / fastselect

Fastselect is lightweight browser plugin for enhanced select elements based on jQuery. Enables fast and sensible UI upgrade of select element with features like option searching and remote dataset loading.

#Fast select Fastselect is lightweight browser plugin for enhanced select elements based on jQuery. Enables fast and sensible UI upgrade of select element with features like option searching and remote dataset loading.

Examples and documentation can be found here

fastselect's Issues

cannot load json from url response

hi,
I am trying to load json from a url like:

url: 'http://localhost/webiste/public/admin/restaurant/getpaymentoptions'

and it is not working even though the URL return the result:

[{"text":"Cash","value":"Cash"},{"text":"Mastercard","value":"Mastercard"},{"text":"Visa","value":"Visa"}, .....}]

is file.json the only format this plugin recognize?
what should I do to make it get the json from the URL response?

How set select unselect options?

I want set select or diselect some option in jquery

can we add images for each option ..?

Passing additional parameters in AJAX call

How to pass additional parameters when making the AJAX calls to remote servers? I could not find a way to send it in the fast select.

Hide options after selecting

Is there a way to hide the options(drop-down) after i select/click an option?

Deselect option in singlemode option after selected

Hi @dbrekalo, how can I deselect option after it was selected? In short, how do I clear selection in single input mode?

How to resize the width on fast select "multiple selectable options"? Anyone?

Add new option to existing fastselect

I'm trying to do this by re-creating the fastselect instance in the same select element.

//add new <option> to <select> $select
$select.fastselect(options); //re-create fastselect

But it doesn't work. I also tried using the 'destroy' method just before calling '$select.fastselect(options);'.

A would like to add the new option at the first position.

Thanks you !

keystroke should trigger select of a tag value

In cases of userOptionAllowed: true, when user types a "," or a tab, it should trigger a tag addition in the input field.

How to update tags values in <input>?

Hi, how do I update the with the current tag values in the container?
or I have to write it manually?

The destroy is function private and does not seem to be used

When used inside a JQuery dialog it can be important to tidy up when the dialog is closed. Fastselect does implement a 'destroy' function but, perhaps because it is not implemented as a widget, this function is not called so the plugin does not tidy up the extra HTML it adds to the page.

It will be great if the destroy function can be exposed.

In the meantime, here is a hack to invoke the function and tidy up:

var elements = jQuery('');
elements.each(function() { jQuery.data(this, 'fastselect').destroy(); });
elements.prop('selectedIndex', -1);

Sortable tags

Have anyone tried to sort the output by dragging so that user will have the option to arrange the order of the selection.

similar request https://github.com/dbrekalo/fastselect/issues/18

Slow page rendering when fastselect executes

Hi I'm using fastselect on multiple select element with 10k+ options and page rendering is slow when fastselect executes on this element.
Any ideas on how to make it faster?
Thanks

I am using fastselect in multiple time in single form genrates error while reciving array values

Sir, I am using fast select in my form with diffrent array name but while reciving values of array the unchenged value getting blank after submition. In short i want to use multiple fast select with differnt values.

Is there anybody using fastselect ? and share knowledge here

Is there anybody using fastselect ? and share knowledge here

many question not answered here

In multiselect mode, searching then selecting doesn't refresh the display - with solution

If you start typing in a multiselect input, the displayed results are filtered based on your search criteria. This is good!

If you then click on one of the results, the search string disappears, but the results remain filtered, with no visual cue as to what's wrong or how to fix it. This is bad.

It's caused by line 454 of fastselect.js, which is as follows:

451        clear: function() {
452
453            this.hideResults();
454            this.$input.val('').trigger('change');
455
456            return this;
457
458        },

The problem is that there is no listener for the change event! This can be fixed by changing line 454 to

this.$input.val('').trigger('keyup');

This change will cause the input to correctly re-open the results with no filter applied. Of course, you might decide that it's better to let the user choose whether to clear the filter, in which case you'd want to remove that line entirely, but I'm sure that comes down to personal preference. The clear() function is only called under this circumstance, so you will not break anything else by commenting out line 454 if that is your desired behaviour.

need to be able to disable the dropdown

I need to be able to disable the dropdown but there is no way to do that with the plugin. the plugin creates an input on top the select tag, so adding "disabled" to the select in original html does not work. how do you disable the dropdown without a bunch of custom code?

stop multi-select from wrapping to next line?

Hi,
Is it possible to make the selections remain on one line without having them wrapping when they hit the end of the initial select box size? I don't like the way it makes the box grow in size...

Is there a way to select multiple items using the shift key with this plugin. I love it but I want users to be able to select multiple options using the shift key. Please help.

I want users to be able to select multiple items using the shift key. Does anyone know how to add that functionality to in Fast Select's "multiple selectable options"? working on a very time sensitive project. Thank you!

Add tags which are not exists

Please add a possibility to add tags which are not in the available list and submit them as text.

Thanks

Autocomplete / search input : word with accent or not

Hi,

I'm using fastselect for a french project so I have some problem when I'm searching an word with an accent.
For example, if in my list I have the word "batelière" with accent, if I type "bateliere" without accent in the input result, the result is "not found".

Does it exist a solution for this issue ?

Thank you for your help.

Hide search options for smaller size options

Hi,

Is there any way to hide search options for smaller size options.

Thanks.

Post data

How to post Multiple data with script.?
I can not find any solution for this issu. please help me

Thanks,
Miten

how to set maximum select option here ?

How to reset dropdown

I use dropdown to display data and I must started at index = -1.
My question is how to reset the dropdown index to -1 after the dropdown was selected?

Sorting output by order of selection

Is it possible to sort the output from multiple input by order in which they were selected? For example. I have four item, Algeria, Barbados, Cuba, Ghana. First I selected Cuba, and then Algeria. I would like to keep this order for save to DB, Cuba first, Algeria second.

Reload the data when fast select opens every time

Hi,

It seems fast select cache the data once it gets the data from server. So subsequent mouse clicks on the control gets me the old values.

How to force fastselect to load the data everytime user clicks on the control.? . The reason I am doing is becausem . my parameter to the server URL will be a combination of other control values along with search text entered by user..

So whenever user opens/clicks the control it should reload the data every time using its get/ajax call.. I want to force this behavior..?

Is there a way..?

No way to programatically change and/or hide select values.

Is there a way to programmatically hide options?

Use case: Selecting an option in a select changes available options in the next select.

I need to unselect all values (or particular ones) and hide specific values. Is there a way to tell fast select to update its values based off the real selector element? (essentially telling it to reset itself).

Options should be selected on page load in dropdown

Hi,

Kindly review following which is working fine.

<script>$('.multipleSelect').fastselect();</script>

On page load, I need some of option to be selected by default.

Kindly help me how can I achieve that.

Thanks in advance.

Data didn't get with multi-select

Hello, i'm using the plugin in WordPress custom development and I have implemented 3 FastSelect Multi-select as custom fields in some of my custom post type and it saves in database successfully but once I update one multi-select the others loose get value but still have the value in database this short video will explain everything, I hope anyone could help. thanks, guys.

Multiple selectable options text input

Hello !

Great tool :) In your first example "Multiple selectable options", if I type : "fra" I get the correct option and I can select "France". However, when selecting "France", the input area is not cleared from the "fra" I just typed...
Is there any way to avoid this kind of behavior ?

Thanks a lot :)

function for destroying an item?

Can you please tell me how to track when an item is destroyed (x button)?

How to update selected values?

How to update selected values?
initailize values = [a, b, c, d, e,.....]
example before I selected [a, b, c] and then I want to add "e" to selected values [a, b, c, e] in javascripts

fastselect does not always deselect!

With the multi-select option, the behavior I am expecting is when an item is deleted (by clicking on the cross), it is also deselected from the drop down.
In some cases, this is occurring ok, but in other cases the item remains selected. (see attached).

This is the one that does not work:

This one does work:

I have compared the html and cannot see any differences, so it is a mystery why the deselect is not working in some cases.

I am using MVC5 ASP.NET

Please help....

Loading JSON file from server

Hi there, I want to search and select multi tags from a URL that's generate the several JSON files like:
http://example.com/json-generator/a or b or c or .... z
When a user type a key in search box like "a" the json file in the server should be like this:
http://example.com/json-generator/a
how can i load it?

Can I do this with fastselect? how?
help me please. thanx

How to save Multiple Data in FastSelect ??

I have implemented select box as per documentation but while posting the data it return only last selected option value, not an whole array or all selected options ??
any suggestions ??

How to locally change placeholder?

I have two fastselect on my page and I want to set different placeholders, Is there any way to change it locally?
I mean something different from changing placeholder using jquery:
$('#specialId .fstQueryInputExpanded').attr('placeholder','sss');

add or remove all selected on button click?

How can i add all select option or remove all when click button?

How can i set display to none until triggered by an event?

I am trying to set display of the multiple select to none until an event trigers it to show. I tried
<select class="multipleSelect" multiple id="multipleSelect" style="display: none;"></select>
But it doesn't do anything. Please any good suggestions?

addChoiceItem() doesn't update query input display - with solution

As coded, if you programmatically call addChoiceItem() on a fastselect with no selected values, the input still thinks it's attached to a fastselect with no selected values, even though you just selected one. The expected behaviour is that when you programmatically select one, the input will adjust its display to reflect the fact that you have at least one value selected. I was able to accomplish this by adding the following code to addChoiceItem, defined on line 703 in the current build:

711			this.$el.removeClass(this.options.noneSelectedClass);
712			this.$queryInput.removeClass(this.options.queryInputExpandedClass).attr('placeholder','').val('');

With this edit, the input adjusts automatically when an item is programmatically selected.

Remove selected option on click of option itself.

Let me explain in brief

If user clicks any option, in dropdown a class is added with background color blue.

And now, if user has to remove the option, he should click on cross mark of bubbles which is working fine.

Can we remove the option on click on options itself??

Like user click on option, it gets selected, again if user clicks on selected option, can we unselect the option??

Programmatically add/remove options?

I have a multiselect which might have options added to or removed from it after the data is loaded and the fastselect is initialized. Is there a way to programmatically add/remove them from the rendered fastselect without de-initializing it, adding/removing the option directly, and re-initializing it?

Close select after one chosen item?

Hey,

The plugin is great.
But is it possible to close the dropdown on every item select?
Why?
Because I have little place to click outside the dropdown to hide it.
And users don't like it much.

remove selected option from list

i need to remove selected options from the fastselect selection
any suggestion?

Can we add slimscroll for options to scroll..?

Default option on Page load

Not able to set a default option on page load. Value is set, but not getting refreshed on the page.
Please share your suggestion.

Pre populate

Hello 👍 :-)
thank you for this great Tool , just it is not possible to pre populate the selected item after submit it would be nice to have this possibility for json version.

Second form send is empty

Hi, I have problem with re-send my forms. After the first send form data are reinit well. I'm using data-initial-value for this. But when I send again without changes, url has no fastselect data. What is wrong? Here is my code to using component:

<input type="text" multiple class="fastselect" data-initial-value='@filterAreas' data-url="api/areas-select" name="areas" placeholder="Select areas..."/>

filterAreas is an array with returned filter data.

Thank you

Need to hide search option from dropdown

Hello,
This plugin is very useful. But i want to hide that search option which is in that drop down?
is there any option to hide that search options input?
i tried with display none but it wont open drop down then
Thanks in advance.

Need to dynamically change the fastselect url parameter

Hello,
I need to display the colleges based on the country. Initially i have select box to list the country and a text box to display the colleges in which the fastselect is enabled. When a user select the country, i need to pass the url with country name in the fastselect url parameter. How it can be implemented?