Regular <select> input is nice, but quite limited. For example, it is hard to use this control on a large set of options. To provide a solution, I have implemented drop down list based on a text input filed but with a dynamic list of options that gets filtered as you type.
<div class="w2ui-field"> <label>Multi-Select:</label> <div><input id="enum"> </div></div><div style="height: 10px; clear: both"></div><div class="w2ui-field"> <label>Max 2 Items:</label> <div><input id="enum-max"></div></div><div style="height: 10px; clear: both"></div><div class="w2ui-field"> <label>Custom:</label> <div><input id="enum-custom"></div></div><div style="height: 20px"></div><script>$(function () { var pstyle = 'padding-right: 3px; color: #828AA7; text-shadow: 1px 1px 3px white;'; var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama']; $('#enum').w2field('enum', { items: people, openOnFocus: true, selected: [{ id: 0, text: 'John Adams' }, { id: 0, text: 'Thomas Jefferson' }] }); $('#enum-max').w2field('enum', { items: people, openOnFocus: true, max: 2 }); $('#enum-custom').w2field('enum', { items: people, openOnFocus: true, onAdd: function (event) { if (Math.random() > 0.8) { event.item.style = 'background-color: rgb(255, 232, 232); border: 1px solid red;'; } }, renderItem: function (item, index, remove) { var html = remove + '<span class="fa fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' + item.text; return html; }, renderDrop: function (item, options) { return '<span class="fa fa-star" style="'+ pstyle +'"></span>' + item.text; } }); // if you need to get to the selected items, use: // $('#id').data('selected');});</script>xxxxxxxxxxoptions = { items : [], // array of item objects, can be a function selected : {}, // selected object max : 0, // max number of selected items, 0 - unlimited match : 'begins', // ['contains', 'is', 'begins', 'ends'] filter : true, // if true, will apply filtering compare : null, // compare function for filtering // -- remote items -- url : null, // url to pull data from (can support similar format as w2grid) method : null, // default comes from w2utils.settings.dataType postData : {}, // additional data to submit to URL recId : null, // map retrieved data from url to id, can be string or function recText : null, // map retrieved data from url to text, can be string or function debounce : 250, // number of ms to wait before sending server call on search minLength : 1, // min search length to trigger reload from URL cacheMax : 250, // number of items to cache if retrieved from URL // -- item and drop items -- maxItemWidth : 250, // max width for a single item maxDropHeight : 350, // max height for drop down menu maxDropWidth : null, // max width for drop down menu renderItem : null, // render selected item renderDrop : null, // render function for drop down item // -- misc -- style : '', // style for container div openOnFocus : false, // if true, opens drop down on focus markSearch : false, // if true, highlights search phrase align : '', // align drop down relative to search field altRows : true, // if ture, will use alternate row colors hideSelected : true, // hide selected items from drop down msgNoItems : 'No matches', msgSearch : 'Type to search...', // -- events -- onAdd : null, // when item is selected from drop down onNew : null, // when new item should be added onRemove : null, // when item is removed onSearch : null, // when search is triggered onClick : null, // when item is clicked onRequest : null, // when data is requested onLoad : null, // when data is received onError : null, // when data fails to load due to server error onScroll : null, // when div with selected items is scrolled onMouseEnter : null, // when mouse enters item onMouseLeave : null, // when mouse leaves item}xxxxxxxxxxoptions = { id : '', // unique id text : '', // item text icon : '', // icon class if any img : '', // image class if any disabled : false, // indicates if disabled hidden : false, // indicates if hidden count : null // count to display on the right};xxxxxxxxxx$('input[type=combo]').data('selected', { id: 1, text: 'Some text'}).change();// or$('input[type=combo]').w2field().set({ id: 1, text: 'Some text'});xxxxxxxxxx$('input[type=combo]').data('selected', { id: 1, text: 'Some text'}).data('w2field').refresh();