Coder Social home page Coder Social logo

dbrekalo / fastselect Goto Github PK

View Code? Open in Web Editor NEW
108.0 11.0 87.0 143 KB

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.

Home Page: http://dbrekalo.github.io/fastselect/

License: MIT License

JavaScript 21.73% CSS 4.12% HTML 74.15%

fastselect's Introduction

#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 People

Contributors

dbrekalo 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

fastselect's Issues

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

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.

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.

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.

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

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

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.

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:
example that does not work

This one does work:
example that 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....

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

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

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

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 !

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.

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.

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

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.

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.

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?

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?

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

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?

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.

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?

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?

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.

Post data

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

Thanks,
Miten

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

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.