Sortable Multiselect

[michael]

Hi!

I've created a multiselect widget for jQuery. It's based on jQuery UI
1.7 and there's also Themeroller support.

Maybe you want have a look at it...

Demo at: http://www.quasipartikel.at/multiselect
Code at: http://github.com/michael/multiselect

Any suggestions/feedback/input welcome. :)

Cheers,
Michael

[Eric Pascarello]

People are probably tired of me saying this, but your widget is not keyboard accessible and requires the use of a mouse. Easy way to get the keyboard involved is to add links for the plus and minus icons. That way you can tab to it and hit the enter key to perform the action.

For the sorting drag and drop, that is still up in the air on how that is made accessible. :)

Eric

[Andrew Powell]

It's very well-done though. Nice job. I have a potential immediate use
for this and am looking into it's use for a project I'm involved with.

Thanks,
Andrew

[Todd Parker]

Hi Michael -

This is very cool, nice work and thanks for using the CSS framework. I
really like this is uses progressive enhancement on a standard multi-
select element. All data entry widgets should map to a standard html
form element. It would be cool if you could call this on a set of
checkbox items as an alternate to the select since this is a more
usable form input for multiple selection for non-js users. Two small
suggestions:

* I was expecting that you could drag items from the list on the left
to the right since they look like buttons. It might be clearer if the
list of available (unselected) items just had small [+] buttons next
to each but the names would be normal text (maybe with very light
bottom stroke to visually connect the name and button). If you get the
drag to add feature in, then having the whole line be a button makes
sense.

* Consider adding in a check all and uncheck all link to make bulk
actions easy. Also consider adding in a total count of the number
selected.

We've built similar widgets in the past because it makes multiple
selection so much easier. The only downside is that this takes up a
lot of space on screen, especially if you have more than one on a
screen at once. On thought I had recently was that the selection panel
to add items could optionally appear only when you mouseover the list
of selected options (also have a small Add link to provide a visual
affordance). This would make this fit better into a layout and have a
more focused presentation for feedback but easy access to add more
items in. Just an idea.

There is a planning wiki page for this type of widget that shows a
design with checkboxes, no sorting and a flipped layout (all items on
left, feedback on right).

Please add screenshots of your idea and links to this project to the
page because it's a nice example for consider for inclusion. Maybe a
hybrid of these designs would be ideal (left list of selected items
for feedback with total count and 'clear all' link, hover to show
"add" panel with an 'add all' link and list of currently unselected
items with 'add' buttons next to each)?
http://wiki.jqueryui.com/MultiCheckboxPicker

On Apr 21, 8:37 am, Andrew Powell <powe...@gmail.com> wrote:
> It's very well-done though. Nice job. I have a potential immediate use
> for this and am looking into it's use for a project I'm involved with.
>
> Thanks,
> Andrew
>

[michael]

Hey folks!

Glad you like that widget!
And thanks for your suggestions!

> It would be cool if you could call this on a set of
> checkbox items as an alternate to the select since this is a more
> usable form input for multiple selection for non-js users.

I think It would bloat the code to much when adding support for
checkboxes right now.
I'm really trying to keep it super-simple :) However, I'll keep that
variant in mind.

> * I was expecting that you could drag items from the list on the left
> to the right since they look like buttons. It might be clearer if the
> list of available (unselected) items just had small [+] buttons next
> to each but the names would be normal text (maybe with very light
> bottom stroke to visually connect the name and button). If you get the
> drag to add feature in, then having the whole line be a button makes
> sense.

It was planned to support drag and drop from the right to the left.
However I had some
troubles with that linked sortables. I'll start one another attempt.
Alternatively
making a clearer graphical distinction is definitely a good idea.

>
> * Consider adding in a check all and uncheck all link to make bulk
> actions easy. Also consider adding in a total count of the number
> selected.

Will be done. guaranteed ;)

> We've built similar widgets in the past because it makes multiple
> selection so much easier. The only downside is that this takes up a
> lot of space on screen, especially if you have more than one on a
> screen at once. On thought I had recently was that the selection panel
> to add items could optionally appear only when you mouseover the list
> of selected options (also have a small Add link to provide a visual
> affordance). This would make this fit better into a layout and have a
> more focused presentation for feedback but easy access to add more
> items in. Just an idea.

Originally I implemented the selection panel as a foldable drawer that
is hidden by default. After some consideration I decided to drop that
and have the selection pane expanded all the times.
I felt it makes the selection task easier/faster since you have a
better overview.

>
> There is a planning wiki page for this type of widget that shows a
> design with checkboxes, no sorting and a flipped layout (all items on
> left, feedback on right).
>
> Please add screenshots of your idea and links to this project to the
> page because it's a nice example for consider for inclusion. Maybe a
> hybrid of these designs would be ideal (left list of selected items
> for feedback with total count and 'clear all' link, hover to show
> "add" panel with an 'add all' link and list of currently unselected
> items with 'add' buttons next to each)?http://wiki.jqueryui.com/MultiCheckboxPicker
>

I'll have a closer look on that.
I totally agree that combining the best approaches is the way to go.
And research is king before start hacking! ;)

Another idea I had, is to add a search/filter box to narrow down the
available items if there are too many.


I'll try to get some time for improving the widget. I'll keep you
posted about progress.
Feel free to work on my code! And keep me posted as well.

@Eric, thanks I'll take keyboard accessibility into account as well.

Thanks,

Michael

> On Apr 21, 8:37 am, Andrew Powell <powe...@gmail.com> wrote:
>
>
>
> > It's very well-done though. Nice job. I have a potential immediate use
> > for this and am looking into it's use for a project I'm involved with.
>
> > Thanks,
> > Andrew
>
> > On Tue, Apr 21, 2009 at 7:35 AM, Eric Pascarello <pascare...@gmail.com> wrote:
> > > People are probably tired of me saying this, but your widget is not keyboard
> > > accessible and requires the use of a mouse. Easy way to get the keyboard
> > > involved is to add links for the plus and minus icons. That way you can tab
> > > to it and hit the enter key to perform the action.
>
> > > For the sorting drag and drop, that is still up in the air on how that is
> > > made accessible. :)
>
> > > Eric
>
> > > On Mon, Apr 20, 2009 at 5:12 PM, michael <m...@zive.at> wrote:
>
> > >> Hi!
>

> > >> I've created amultiselectwidget for jQuery. It's based on jQuery UI

[michael]

I did a lot of tinkering the last two days and as a result implemented
some new features based on your suggestions.

You can see the current result at http://quasipartikel.at/multiselect_searchable/
It should work basically, but it's almosted untested and known to be
slow... ;)
Therefore the new version lives in a separate "searchable" branch at
Github.

http://github.com/michael/multiselect/tree/searchable

As always, suggestions/contributions are greatly appreciated.
(in particular suggestions on performance optimization).

Cheers,
Michael

[Todd Parker]

Hi Michael -

These updates are great. I like the counts, check all/none and search
features a lot. It is a bit slow if you do the check all or none
operations but it's pretty slick in general. The themes work like a
charm too. My only remaining issue is the add button is pretty subtle
because the whole item like a button, but only the + is clickable. If
the whole item was clickable, that would seem more intuitive to me
anyway.

Does this use the widget factory? It might be a good item to add to
the forthcoming jQuery UI lab section it it's already coded like a
standard UI plugin.

_t

On May 5, 12:57 pm, michael <m...@zive.at> wrote:
> I did a lot of tinkering the last two days and as a result implemented
> some new features based on your suggestions.
>

> You can see the current result athttp://quasipartikel.at/multiselect_searchable/

[David Muir]

Hmm.. will need to take a look at this. I built a similar plugin (two, actually. One for search/filter, and one for multi-select) that works in a similar manner. I'm curious about your search implementation. It seems to work quite well.

Mine isn't public yet, but the way I did it was to make a lower-case copy of the select list and store it in data. I then used the :contains selector to search for the options. I did it that way to avoid using an each, which gets a bit slow when searching several hundred options. Once I put mine up, I'll let you know, in case there are some things you want to borrow or laugh at :-)

Cheers,
David

[michael]

Hi!

I've made select all / remove all operations a bit faster, but still
not fast enough.
Sadly I'm caught up with project work atm... but I'll resume hacking
on multiselect asap.

@Todd
Yes it uses the widget factory. I tried to follow the development
guidelines (at least as good as i can).


@David
Would be great! Looking forward! :)


What else to say?
---

If you discover any bugs please file an issue at Github (http://
github.com/michael/multiselect/issues).

I'm primarily doing Ruby and I'm quite new to jQuery and jQuery UI in
particular.
So I really want to invite you to hack on my code:
- Fork it on Github
- experiment with stylesheets (e.g. adequate styling for the
available list)
- cleanup the code (believe me that's necessary ;))
- ...

I'm not interested in owning this project alone and even less in
owning a copyright on it..
I'm also not able to maintain it on a grand scale, since Javascript/UI
is not my main field and it won't be in the near future.
However, I would be glad to see the Multiselect widget (or whatever
evolves from it) in the UI package some day. - Don't even thought
about that possibility. ;)

Btw: we've finally launched our website... http://quasipartikel.at -
feedback welcome ;)

Cheers,
Michael

[michael]

I'm currently working on fixes and adding drag&drop functionality.
Basically it's working... but I'm
having troubles with special behavior of draggable+sortable.

Unlike the demo http://jqueryui.com/demos/draggable/#sortable , I want
to hide the original draggable item (which is cloned every time I drag
to the sortable list).
I think I need a callback like droppable's "drag", where I can access
the original (to hide it) and the cloned item (to apply the changed
style).

I just can't find a way to recognize a valid drop into the sortable
selected-list and having access to all subjects, the original, the
cloned drag-helper and the new element that is created within the
sortable selected-list.


Any idea, how to deal with that?

Thanks, Michael

On May 12, 6:45 pm, michael <m...@zive.at> wrote:
> Hi!
>

[Richard D. Worth]

Is this the issue you're hitting?

http://dev.jqueryui.com/ticket/4303

Sounds like it.

- Richard

[Richard D. Worth]

Is this the issue you're hitting?

http://dev.jqueryui.com/ticket/4303

Sounds like it.

- Richard

On Fri, May 15, 2009 at 2:33 PM, michael <m...@zive.at> wrote:

[michael]

Thanks, that helped!

Finally I got it working (even though I needed some rather nasty
workarounds).
May be buggy!


Latest commit: http://github.com/michael/multiselect/commit/376fb7c2751981a6cd8fccc847208068b8eaf136
Code: http://github.com/michael/multiselect
Blogpost: http://quasipartikel.at/2009/05/10/jqueryui-multiselect/
Demo: soon...

Cheers,
Michael

On May 15, 9:07 pm, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> Is this the issue you're hitting?
>
> http://dev.jqueryui.com/ticket/4303
>
> Sounds like it.
>
> - Richard
>
>
>
> On Fri, May 15, 2009 at 2:33 PM, michael <m...@zive.at> wrote:
>
> > I'm currently working on fixes and adding drag&drop functionality.
> > Basically it's working... but I'm
> > having troubles with special behavior of draggable+sortable.
>

> > Unlike the demohttp://jqueryui.com/demos/draggable/#sortable, I want

> > jQuery...
>
> read more »

[michael]

Set up a bleeding edge demo page which is always available at
http://michael.github.com/multiselect/.
Thanks to Github Pages it's easy to have it in sync with the master
branch.

But keep in mind, the bleeding edge demo page is considered to
buggy ;-)

Cheers,
Michael

On May 16, 5:52 pm, michael <m...@zive.at> wrote:
> Thanks, that helped!
>
> Finally I got it working (even though I needed some rather nasty
> workarounds).
> May be buggy!
>

> Latest commit:http://github.com/michael/multiselect/commit/376fb7c2751981a6cd8fccc8...

> > > > > >>>>> On Tue, Apr 21, 2009 at 7:35 AM, Eric...
>
> read more »

[michael]

"Official" demo page updated... http://www.quasipartikel.at/multiselect/

I also tagged the current version with 0.3.
For the first time ever this release can be considered "quasi-
stable". ;-)
We will add patches from time to time to the 0.3-branch while working
on additional features (such as AJAX support).

Please post issues to to Github http://github.com/michael/multiselect/issues
as they come up.

Thanks to Yanick Rochon for his great contributions!! see
http://github.com/yanickrochon/multiselect/tree/master


Hope u like it!

Cheers,
Michael

On May 16, 7:55 pm, michael <m...@zive.at> wrote:
> Set up a bleeding edge demo page which is always available athttp://michael.github.com/multiselect/.

> > > > > However, I would be glad to see theMultiselectwidget (or whatever

> > > > > > >>> available items if there are too many....
>
> read more »

[Ca-Phun Ung]

Very nice indeed!

A suggestion: The remove all / add all links takes a while to update the list - a progress indicator or spinning graphic to indicate it's working would be nice.

The search does seem to work? Tried searching for "China" but nothing happened?

--
Ca-Phun Ung
+ http://yelotofu.com
+ hongkong, zce, jquery, jqueryui, php, css, html

[michael]

Fixed that strange search behavior you mentioned.

Sure. Batch actions (add/remove all) need some optimization by all
means. Targeted for 0.4 ;-)

Cheers,
Michael

On May 18, 7:59 pm, Ca-Phun Ung <cap...@yelotofu.com> wrote:
> Very nice indeed!
>
> A suggestion: The remove all / add all links takes a while to update the
> list - a progress indicator or spinning graphic to indicate it's working
> would be nice.
>
> The search does seem to work? Tried searching for "China" but nothing
> happened?
>
>
>
> On Tue, May 19, 2009 at 1:21 AM, michael <m...@zive.at> wrote:
>

> > "Official" demo page updated...http://www.quasipartikel.at/multiselect/

> > > > > > > > >>>> to add items...
>
> read more »

[Reijer]

Hello Michael,

first off all nice plugin!

Unfortunately i discovered some bugs:
- i need multiple instances of multiselect in one form and each
<select> has it's own id, but when i try to implement this, the drag
and drop don't know the right multiselect.
- when i quickly click with the mouse on the left list the counter
became negative :S

i hope you can fix this bugs!

Greetingz,
Reijer

> ...
>
> meer lezen »

[michael]

We are working on a new (rewritten) version of the plugin that
provides much more features.
You can check it out using Github. The new version is available in a
separate "next" branch.

http://github.com/michael/multiselect/tree/next

It should already be more stable than the current 0.3 version.

Cheers,
Michael

> > > > buttons...
>
> read more »