Documentation | JavaScript UI

Drop List

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

List:

Cannot type any text, but only items from the list

Combo:

You can type any text

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>

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, can be a function
    selected        : {},           // selected object
    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
    minLength       : 1,            // min search length to trigger reload from URL
    cacheMax        : 250,          // number of items to cache if retrieved from URL
    maxDropHeight   : 350,          // max height for drop down menu
    maxDropWidth    : null,         // max width 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 item
    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
    renderDrop      : null,         // render function for drop down item
    compare         : null,         // compare functtion while searching
    filter          : true,         // filter as user types
    prefix          : '',           // prefix for control
    suffix          : '',           // suffix for control
    msgNoItems      : '',           // message when nothing found, can be a function
    openOnFocus     : false,        // if to show overlay onclick or when typing
    markSearch      : false,        // indicated if to mark search string in the drop down
    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
};

Item Object

Set Value From JavaScript

To set a different value from JavaScript you need to change $('#id').data('selected') and refresh the field: In 1.4.0, you should be able to do it with