| |
Javascript/jQuery Projects
Filterable Dual Listbox With Plain Javascript
One of the projects I'm doing at work requires that the user be able to manage lists of items. We wanted to be able to have what are essentially lists of have and have nots.
Further, we needed to be able to manage those lists on a page, and do so in the simplest way possible. You see, this project is in Classic ASP, so rather than making
a bunch of complex server calls, I wanted to handle the list management on the client side, and send the completed info back to the server. To that end, I set out to write the solution
using plain HTML and Javascript.
Notable Features
- Selecting one or multiple items and the clicking the corresponding "move" button (> or <) moves all selected items to the other box.
- Clicking either "move all" button (>> or <<) moves all visible items from one box to the other.
- Double-clicking an item in a box moves it to the other box.
- Typing in either "filter" box filters items not containing that text (case-insensitive) out of the corresponding box.
- Clicking the "X" button next to either filter clears the corresponding filter.
- The text at the bottom of each box displays how many items are showing, and how many the box contains (the numbers may be different if a filter is applied).
Links
Filterable Dual Listbox Using jQuery
This project deals with the same issue as the plain Javascript dual list box, and has the same feature list.
The only difference is that this one is done using jQuery, and in my opinion, is a much more elegant solution.
If you can't tell the difference between the end results of these two solutions, then my job is done.
Links
Filterable Dual Listbox Using jQuery, Advanced Options
Once again, a similar project. This time, the jQuery script has some advanced options that allow for different kinds of functionality. In addition to the functionality,
you can now specify that one box should copy selected items to the other box, and rather than removing the items from its own list, highlight any that have been copied.
If items are then removed from the second box, the highlighting on corresponding items is removed from the first box.
Links
Filterable Dual Listbox Using jQuery, Fast Version
Sarcasm aside, the previous instances of the jQuery scripts for this experiment were criminally inefficient. With ~600 options in the select boxes, the script could take upwards of a minute to complete execution,
causing one or sometimes several script time-out errors on the client end. That's no good. The good news is, the problem was my fault, and I fixed it. With a small number of options, you will likely not notice a
difference between this script and the previous one, but try running both with large groups of options, and I promise you, you can tell. Because I wasn't using it for the project, I removed the option
to move the options rather than copy them. However, it should be fairly easy to use this script as a starting point to accomplish that, and the result, if I imagine correctly, should be even faster than this script.
Links
Filterable Dual Listbox Using jQuery, Cross-Browser Compatible Version
So it turns out that some of the "functional" scripts above only work in Firefox (and possibly other Mozilla browsers, but I haven't tested them). Those scripts rely on the ability to apply a display:none; style to the list item elements, which is apparently not supported by a majority of the most heavily used browsers. I don't see why this should be and I don't like it, but that's how it is, so I guess I just have to live with it. Deal with it, rock and roll, as I like to say. Thus, I present you with (what should be) the final version of the Filterable Dual Listbox, which is cross-browser compatible.
Links
|
|