• Form
• Overview
• Events
• Properties
• Methods
• Fields
• Numeric
• Date & Time
• Drop Lists
• Multi Selects
• Upload
• Custom

Multi Select

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.

Preview

Code

<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 VanBuren', '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-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' + item.text; return html; }, renderDrop: function (item, options) { return '<span class="fa-star" style="'+ pstyle +'"></span>' + item.text; } }); // if you need to get to the selected items, use: // $('#id').data('selected'); }); </script>

Options

You can provide various options for numeric fields as second argument. The structure of the options object is below: options = { items : [], // array of item objects selected : [], // selected array placeholder : '', // placeholde if empty max : 0, // max number of selected items, 0 - unlim url : null, // url to pull data from postData : {}, // additional data to submit to URL minLength : 1, // min search length to trigger relod from URL cacheMax : 250, // number of items to cache if retrieved from URL maxWidth : 250, // max width for a single item maxHeight : 350, // max height for input control to grow maxDropHeight : 350, // max height for drop down menu match : 'begins', // ['contains', 'is', 'begins', 'ends'] silent : true, // indicates if to display error tag icon : null, // icon class for selected item iconStyle : '', // icon style for selected iton style : '', // style for container div renderDrop : null, // render function for drop down item renderItem : null, // render selected item prefix : '', // prefix for control suffix : '', // suffix for control openOnFocus : false, // if to show overlay onclick or when typing markSearch : false, // indicated if to mark search string in the drop down onSearch : null, // when search needs to be performed onRequest : null, // when request is submitted onLoad : null, // when data is received onError : null, // when data fails to load due to server error or other failure modes onIconClick : null, // when icon is clicked onClick : null, // when an item is clicked onAdd : null, // when an item is added onNew : null, // when new item should be added onRemove : null, // when an item is removed onMouseOver : null, // when an item is mouse over onMouseOut : null // when an item is mouse out };

Item Object

options = { 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 disaply on the right };

User Comments

comments powered by Disqus