list with multiple select2 very slow - javascript

I've got a list with 100 records. For each record I've got 2 selectboxes which I convert to a select2 selectbox. Problem is that building the list takes 10 seconds. When I'm not using select2 it takes 1 second.
Any idea how I can make it faster?

Apply a graphical plugin to 200 elements take time.
You could try to hide the container containing the select boxes before applying the Select2 plugins and display it only after page loading (use JQuery event to be notified). Therefore, it will avoid browser refreshing.
You should also consider to not display all your select boxes on the same page (use pagination?).
Or apply the plugin only to the visible select boxes on the screen. Spy the scroll event to apply the plugin to the new elements displayed.

Related

Chrome input caching too slow

I have a website which has 3 select boxes at the top. These select boxes are used as filters for a table I am displaying underneath it. When you change something on the select box I filter the table.
If I change the select box values and go to a new page and hit the back arrow at the top and return to the same page all of my select boxes changes are still there. However, the filter that I applied to the tables using javascript does not match the filter displayed. The table displays data for the default filters.
I though if I just run the filter function on page load, things would work again. But turns out the filter function runs way before chrome resets the value of the select boxes from the cache. When I set the breakpoint and started debugging the progression on returning back to page is:
1. The select boxes resets to default values (i.e the order of the `<option>` tag)
2. The table filters based on the default values
3. Chrome at some point decides to readd the filter
How do you guys deal with this?

jQuery - having icons at the end of drop down list items with independant actions

Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).

Dynamically loaded items not shown in second time on dropdown (Harvesthq Chosen)

I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.
This worked for me
$("#form_field").trigger("liszt:updated");

Is there a way to keep multiple select boxes open at the same time?

I have 2 Select Box in my HTML page.
For some reason, I wish to want both the text boxes open at the same time.
This may be for several purposes, like taking screenshots of the both open at the same time.
The problem I face is, when I click on one selectbox, another goes away, when I click on the other, previous goes away.
Is it possible to keep both the selectboxes open at the same time?
I am fine if it requires javascript to do so.
Here are the two boxes, which I wish to keep open, is it possible to block some events or anything?
Thanks
#xiankai: Yes I have considered using a list view already, and then later instructing that this would/could be a combo-box. Here's my work with this modification.
If your select box doesn't have many elements, have you considering using a listbox view instead? Simply add multiple to the your <select> element. Additionally, you can specify the height of the select box with the size attribute.

dropdown or combo

I need exactly same feature as following dropdown or combo
Typable inside combo and auto complete,
2000 of items or more.
Should not show items list while typing.
Should show items list after pressing downkey or button.
while showing items list, must shows 3 or 4 items at a time and scoll and focus.
Hope you get my problem.
Take a look at jQuery Autocomplete. It has most most features you require, and you can probably customize it to get the rest.
At least you get a solid basis to build upon.

Categories