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

Drop List

Regular <select> input is 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>List:</label> <div> <input type="list"> <span class="legend">Cannot type any text, but only items from the list</span> </div> </div> <div style="height: 10px"></div> <div class="w2ui-field"> <label>Combo:</label> <div> <input type="combo"> <span class="legend">You can type any text</span> </div> </div> <div style="height: 20px"></div> <script> $(function () { 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']; $('input[type=list]').w2field('list', { items: people }); $('input[type=combo]').w2field('combo', { items: people }); }); </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 items, can be a function selected : {}, // selected item match : 'begins', // ['contains', 'is', 'begins', 'ends'] filter : true, // filter as user types compare : null, // compare functtion while searching prefix : '', // prefix for input suffix : '', // suffix for input icon : null, // icon class for selected item iconStyle : '', // icon style for selected item // -- 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 minLength : 1, // min search length to trigger reload from URL debounce : 250, // number of ms to wait before sending server call on search cacheMax : 250, // number of items to cache if retrieved from URL // -- drop items -- renderDrop : null, // render function for drop down item maxDropHeight : 350, // max height for drop down menu maxDropWidth : null, // max width for drop down menu minDropWidth : null, // if null then auto set // -- misc -- // -- misc -- markSearch : false, // if true, highlights search phrase align : 'both', // align with the input ['left', 'right', 'both', 'none'] altRows : true, // alternate row color for drop itesm openOnFocus : false, // if true, shows drop items on focus hideSelected : false, // hide selected item from drop down msgNoItems : 'No matches', msgSearch : 'Type to search...', // -- events -- 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 }

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 display on the right };

Set Value From JavaScript

To set a different value from JavaScript you need to change $('#id').data('selected') and refresh the field: $('input[type=combo]').data('selected', { id: 1, text: 'Some text'}).change(); // or $('input[type=combo]').w2field().set({ id: 1, text: 'Some text'}); In 1.4.0, you should be able to do it with $('input[type=combo]').data('selected', { id: 1, text: 'Some text'}).data('w2field').refresh();

User Comments

comments powered by Disqus