Hi I know its not a good idea but due to one use case I am populating a combo box with more 10000 items. Its behaving very weired in IE7 in all other browsers its working fine in IE7 its taking too much time for downloading the page. Sometime IE7 also hangs up
Is there any known bug with IE7 for this issue.
Thanks,
Amit
Not sure whether anything can be done to speed this up. One thing to look into would be loading the options dynamically through Ajax, and adding them as DOM nodes to the existing select element. That would at least allow the whole page to load before the rest of the data is fetched.
There are ready-made JS/jQuery-based Ajax combo boxes as well. One with a good loading strategy might yield better results.
I have no experience with them so I can't tell which one is suitable for you, but these seem worth checking out:
DHTMLXCombo (not free)
More in this question
I would suggest abandoning any attempt at having 10k entries in a single select box -- as others have said, it's a user interface nightmare, even if you can solve the problem with it killing the browser (which I don't think you can).
What to do instead?
Break the selection into categories. Then have one <select> box for the category, and have a second <select> get populated according to the category that is picked. This second <select> could be populated via Ajax or a page reload; both techniques are common. Given the quantity of options you want to provide, you may even want to break it down into category and sub-category.
The other alternative (which may be better, given the number of options you're providing) is to implement a Google-style auto-complete. There are a number of easy-to-use Javascript and JQuery scripts out there which allow you to implement this sort of thing without having to write it from scratch - it's almost as easy as writing the select box.
Here's one for you to try: http://docs.jquery.com/Plugins/autocomplete (but there are plenty of others if you google)
Hope that helps.
Related
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
I'm writing a web application that displays a large number of rows of data (~2000 at present), each of which has a drop-down "select" element with ~100 options. Any of those options can be selected by default. I'm generating all the actual DOM elements client-side. My problem: rendering this beast takes ~4 seconds on my relatively recent machine, which is really suboptimal. I know the problem is specifically with all the select elements, because replacing them with a bit of static text or a single-option list causes render time to be nigh imperceptible.
The vanilla code, minus failed experiments (see below) is here.
Avoiding the suggestions of "paginate your data" and "don't have so many options in a select", what is the most efficient way I can write my append / render code, assuming I do have a legitimate reason to display that much data and have that many options? For my purposes, Firefox is the only platform I care about.
Things I have tried:
Using an async loop to append rows to the table (slower than a regular loop, and oddly didn't render the intermediate results)
Building up a string that represents the body of the table and inserting it into the DOM in a single call (almost identical performance)
Instead of inserting the entire options list, inserting a single-option "select" element, and then populating the entire list when the "select" element gains focus (presumably because someone is trying to change it). This was actually pretty high-performing for the initial render, but then populating the element with the full list caused some weird behavior, losing focus and never actually being able to "open" the select element.
Right now my default assumption is that the third option is the way to go, and I need to figure out how to do some bookkeeping about what has already been populated. But my suspicion is that there is a plainly better / faster / more idiomatic way to do this. Is there?
Yes, I would "lazily" generate and/or populate the dropdowns.
That is, only create and populate the dropdowns when the user clicks on them, as probably almost all of the dropdowns in the 2000 rows will never be used right?
Perhaps a select element might not be the best UI here too, but instead some kind of HTML menu like so: https://jqueryui.com/menu/ that is created, populated and displayed only when the user clicks on some kind of button to display it.
I have a classic ASP page that when loaded does a JavaScript call to another ASP page to retrieve XML to load into my <select> box. It has to load roughly 24k options; needless to say, this is rather cumbersome.
They don't all need to be loaded in immediately and it doesn't matter if it actually takes a while to load as long the page doesn't hang. The page needs to work in IE6+ (bummer).
I've considered that when a user scrolls past a given section it will load in 100 more, however, can't find an appropriate property that will work in IE6 for scrollbar position. I considered using onmouseover of a specific option (i.e. "Hover for more results...") but the event doesn't fire.
If anyone can point me in the right direction I'd really appreciate it. :>
You should set up a service that lazy loads your items into the Select List using something like a server side backed store.
If I were to try and tackle this problem, I would go down the JsonRestStore route and using the Dojo Toolkit, to request items as they are needed, then populate them into a ComboBox/FilteringSelect.
Here are some resources for you.
http://livedocs.dojotoolkit.org/dojox/data/JsonRestStore
And here is a demo of what Filtering Select can do.
Just as a final note, I might add, that loading all of these into the DOM, will always be a bad idea. You should use a grid or something, or use a predicter as they type to narrow down.
I use a JsonRestStore which powers a grid with around 5 million items. All I do is load new items as the user scrolls down the page. As they scroll, it detects that I need to pull another 25 items from the server, this kicks off a new query, and then it gets loaded into the grid.
By "select list" I presume you mean the HTML element
<select>
<option>option 1</option>
...
<option>option 24000</option>
</select>
In short, more than 10-15 options in a select list is REALLY BAD USABILITY. So if this is your case you may want to rethink the interaction, since even rocket scientists will have a hard time finding and selecting just the right option out of 24000 options.
To anyone absolutely stuck doing this with a dropdown box the only way I could get it to not lock up the browser was using setTimeouts. In chrome this runs perfectly fine, but the lowest timeout IE can accept is something like 13MS and really hampers load times. On top of that I (personally) think it's a pretty ugly solution... but it's better than locking up the form, I guess.
var i = 0;
function doStuff()
{
// code to execute, ie, add items
i++;
if (i != end of loop)
{
setTimeout(doStuff, 1);
}
setTimeout(doStuff, 1);
Another piece of advice I found was to avoid reflows by using a code fragment or hiding the dropdown box (simply setting style.display to "none") until all the items are added.
First of all, I'm not a JS developer, so I apologize if I'm asking a rather too general, previously asked or complex question. The functionality I'm searching for is that I'd like to have two HTML lists, on the load the first one is empty and I want user to pick the items he like from the second list and drag them into the first one (which should be sortable so user can set the order he likes). Is there a easy to use plugin for it?
I really like the idea and look of those two plugins..
http://www.emposha.com/javascript/fcbkcomplete.html
http://loopj.com/jquery-tokeninput/
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
There are doing something different, but those "bubbles" in textfield are a great way to handle it (from UX point of view). Just to be able to have an empty text field, available bubbles below it and to be able to drag them into the text field, just those user wants (no autocomplete functionality, just draging from some list of them, maybe sorting in text field available would be nice). Maybe there's a similar plugin to do that.
Another thing is, it's a part of a form so I need to be able to send those picked up elements to the server with the form, each with it's position. I know, I am asking too much but any help will help me.
Try to use Jquery UI
Here are links for demos
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/droppable/
EDIT
I think all you want is this
http://jqueryui.com/demos/droppable/#shopping-cart
Maybe jQuery UI would work for you; it is composed of several handy helper functions.
Take a look at sortable with connected lists: http://jqueryui.com/demos/sortable/#connect-lists
Essentially the length of the HTML Select drop down is exceeding the screen on notebooks, I've checked and different browsers allow different amounts of options to be displayed before it turns it into a scrollbox. Is there any way of putting in a browser css hack or javascript action to stop it at 3 options? Failing that is there any way to limit the height of the drop down for the same effect?
I've googled up on this but with no such luck, no one seems to have had a problem with notebooks before. I know it's possible as on the Lloyds TSB personal login screen there is a select element which limits to about 3/4 options. As I say I don't mind using JS or even browser specific solutions as I've developed a notebook friendly way of doing it which is less intuitive and clunky looking but can be used as a default.
Any help would be greatly appreciated.
Rupert S.
Sadly, you can't change the item's that the dropdownlist displays, it is decided by the browser, with the size option it will loose its 'dropdownlist' form, and turn more into a list.
You could try finding some Jquery dropdown list, they are usually editable to whatever you want.