A demo of an editable select list, plugin for jQuery

Read more at http://coffeescripter.com/2009/07/an-editable-select-list-plugin-for-jquery/ | More code at Coffeescripter.com

Country Denmark Sweden, selected Norway Finland Iceland

Names Al Anders Andy, selected Brad Fred George Jennifer Matt Niklas Nicole Susan

Other select Other1 Other2 Other3 Other4 Other5 Other6 Other7 Other8 Other9 Other10 Other11 Other12 Other13 Other14 Other15 Other16 Other17 Other18 Other19 Other20 Other21 Other22 Other23 Other24 Other25 Other26 Other27 Other28 Other29 Other30

Color Color 1 Color 2 Color 3 Color 4 Color 5 Color 6 Color 7 Color 8 Color 9 Color 10 Color 11 Color 12 Color 13 Color 14 Color 15 Color 16 Color 17 Color 18 Color 19 Color 20 Color 21 Color 22 Color 23 Color 24 Color 25 Color 26 Color 27 Color 28 Color 29 Color 30

Just an example of the fact that it works even if the select list isn't visible from the start, or if you move the elements around

Hidden Al Anders Hidden name, selected

Features

• Navigate through list with keyboard arrows
• Close list with Esc button
• If the user types in an option that exists in the list, it gets selected
• Autosuggests options when you type
• If an option in the original list has the selected attribute, it's value is put inside the text input
• Add a background iframe to prevent IE from displaying select lists above the EditableSelect options
• If the user types in a value that exists in the list, that option is highlighted in the list when you click on it, just like real selects
• Pick option by clicking on it, pressing Tab, or pressing Enter (form submission is prevented when you hit Enter)
• Add values after init with addOption()

Downloads

The JS-file

The CSS-file

The arrow image

Download all the files required

Note

When the plugin runs, it replaces the select with an input field, and sets the id of the input to the id of the select. The id of the select is then set to [real id]_hidden_select. If the element has no id, the id is set to editable-select[0-9]. Beginning with 1.3.2, it also copies all class names from the select to the input.

Example code

$(function() {
  $('.editable-select').editableSelect(
    {
      bg_iframe: true,
      onSelect: function(list_item) {
        alert('List item text: '+ list_item.text());
        // 'this' is a reference to the instance of EditableSelect
        // object, so you have full access to everything there
        alert('Input value: '+ this.text.val());
      },
      case_sensitive: false, // If set to true, the user has to type in an exact
                             // match for the item to get highlighted
      items_then_scroll: 10 // If there are more than 10 items, display a scrollbar
    }
  );
  var select = $('.editable-select:first');
  var instances = select.editableSelectInstances();
  instances[0].addOption('Germany, value added programmatically');
});

Feedback, feature requests, bug reports

If you have any feedback on this, please send it as a comment or email me at andy at-no-spam coffeescripter dot-no-spam com.

Credits

Thanks to Niklas Ohlsson for a lot of bug testing and helping out with feature ideas.

Changelog

• 2010.11.06 Fixed it for newer versions of jQuery, and made it possible to have select lists that are hidden at page load - v1.3.2
• 2009.07.17 Fixed a bug in Opera and Firefox 3.5 that made the scroll unscrollable, and items unhoverable (is that a word?) - v1.3.1
• 2009.07.16 Added features that works with regular selects, but were missing from this plugin, also added auto suggestion on options when you write - v1.3.0
• 2009.07.15 Added ability to add option after creation, and to get the instance for an element, also added a packed version - v1.2.0
• 2009.07.09 Added the onSelect callback - v1.1.0
• 2009.07.07 Released - v1.0.0