Use to create what is essentially a simple, multi-line select input where the contents of each item can be anything you like.

Example

See source code file...

Parameters

  • changeHandler - The function to call when a user changes the selected item(s) within the control. Takes 3 arguments:
    • listElement - The jQuery element that is the list (testDiv in the example).
    • selectedItemNames - An array containing the names of the selected items.
    • selectedItemIDs - An array containting the IDs of the selected items.
  • multipleSelect - Indicates whether or not the user can select multiple items (hold down ctrl or shift).
  • quickFind - Enable or disable the quick find functionality. When enabled, the user can press a key with the control in focus and it will attempt to scroll to the first item whose name attribute starts with the pressed key. Note that this really only works if the item names are unique and the items are sorted alphabetically by name.
  • quickFindOverlay - Only valid when quickFind is true, enable or disable an overlay that shows what key the user pressed in conjunction with the quick find functionality.
  • selectedItemIDs - The IDs of the items to pre-select when rendering the control. Omitting the option or specifying an empty array will not select any items.

Methods

  • $("#testDiv").listSelect("selectedItemIDs");
    Get an array of selected item IDs.
  • $("#testDiv").listSelect("selectedItemNames");
    Get an array of selected item names.
  • $("#testDiv").listSelect("selectedItemIDs", ["23", "45"]);
    Set the selected items by ID.
  • $("#testDiv").listSelect("selectedItemIDs", []);
    Clear the selected items.
  • $("#testDiv").listSelect("enable");
    Enable the control.
  • $("#testDiv").listSelect("disable");
    Disable the control.

Dependencies

jListSelect.css

Notes

You cannot set selected items by name, only by ID.
All item IDs must be unique.
The functionality to scroll to the first selected item may not work if the list is not visible. A simple solution is to keep track of when it becomes visible and execute something like the following:

$("#testDiv").listSelect("selectedItemIDs", $("#testDiv").listSelect("selectedItemIDs"));

Last edited Jul 16, 2012 at 11:32 PM by cmaterick, version 9

Comments

cmaterick Jul 17, 2012 at 12:01 AM 
I assume you were using Chrome (or another WebKit browser)? The div that is assigned to be the ListSelect must have a tabindex attribute to work correctly in Chrome. I've added this in the example.

I've also corrected a bug that was preventing multipleSelect from working even when enabled, and it should now work when you set the value to true.

Thanks very much for the feedback.

farrag Jul 11, 2012 at 10:09 AM 
I tried it with the commented code. It is great plugin but some features doesn't work with me , could you plz attach a sample with all features. PS: the features doesn't work is multipleselection and quickfind.
Regards