<form class="ch-form" method="get" action="http://www.mercadolibre.com.ar/jm/search">
    <input id="dm_ac" name="dm_ac" type="text" placeholder="iPhone" />
    <input class="ch-btn" id="dm_ac_sbt" name="dm_ac_sbt" type="submit" />
</form>

function parseResults(results) {
    var data = [];
    if (results[2].suggested_queries !== undefined) {
        results[2].suggested_queries.forEach(function (e, i) {
            data.push(e.q);
        });
        // Show suggestions
        autocomplete.suggest(data);
    }
}

var autocomplete = new ch.Autocomplete(ch('#dm_ac')[0])
    .on('type', function (userInput) {
        tiny.jsonp('http://suggestgz.mlapps.com/sites/MLA/autosuggest?q=' + userInput + '&v=1', {
            'name': 'dm_ac_sbt',
            'success': parseResults,
            'error': function (err) {
                autocomplete.suggest([]);
            }
        });
    });

<h3>Expandable with paragraph</h3>
<h4 id="dm_exp_pr">Expandable</h4>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Expandable with list</h3>
<h4 id="dm_exp_li">Expandable</h4>
<ul class="ch-list">
    <li>Foo</li>
    <!-- [...] -->
</ul>

<h3>Expandable with box list</h3>
<h4 id="dm_exp_bli">Expandable</h4>
<ul class="ch-box-list">
    <li><a href="#">Foo</a></li>
    <!-- [...] -->
</ul>

<h3>Expandable with Ajax call</h3>
<h4 id="dm_exp_ajax">Expandable</h4>
<div id="dm_exp_ajax_cnt">
    <!-- Content will be loaded using Ajax. -->
</div>

var expandableParagraph = new ch.Expandable(ch('#dm_exp_pr')[0]);

var expandableList = new ch.Expandable(ch('#dm_exp_li')[0]);

var expandableBoxList = new ch.Expandable(ch('#dm_exp_bli')[0]);

var expandableAjax = new ch.Expandable(ch('#dm_exp_ajax')[0], {
    'content': '/ajax.html',
    'container': ch('#dm_exp_ajax_cnt')[0]
});

<ul class="ch-menu" id="dm_mn">
    <li>
        <span>Option</span>
        <ul class="ch-box-list">
            <li><a href="#">Link 1</a></li>
            <!-- [...] -->
        </ul>
    </li>
    <li>
        <a href="#">Link</a>
    </li>
</ul>

var menu = new ch.Menu(ch('#dm_mn')[0]);

<h3 id="dm_dp_df">Dropdown</h3>
<menu class="ch-hide" label="Links">
    <li><a href="http://www.mercadolibre.com">Mercado Libre</a></li>
    <!-- [...] -->
</menu>

<span class="ch-icon-th" id="dm_dp_ns"></span>
<ul class="ch-hide">
    <li>
        <img src="picture.png" />
        <!-- [...] -->
    </li>
    <!-- [...] -->
</ul>

<p id="dm_dp_skn">Dropdown</p>
<menu class="ch-hide" label="Links">
    <li><a href="http://www.mercadolibre.com">Mercado Libre</a></li>
    <!-- [...] -->
</menu>

var dropdownDefault = new ch.Dropdown(ch('#dm_dp_df')[0]);

var dropdownNoShortcuts = new ch.Dropdown(ch('#dm_dp_ns')[0], {
    'shortcuts': false,
    'skin': true
});

var dropdownSkin = new ch.Dropdown(ch('#dm_dp_skn')[0], {
    'skin': true
});

<span id="dm_ly_pl">Content</span>
<span id="dm_ly_el">Content</span>
<span id="dm_ly_dom">Content</span>
<span id="dm_ly_btn">Content</span>
<span id="dm_ly_ajax">Content</span>

<div class="ch-hide" id="dm_ly_dom_cnt">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

var layerPlain = new ch.Layer(ch('#dm_ly_pl')[0], {
    'content': 'Plain text'
});

var layerElement = new ch.Layer(ch('#dm_ly_el')[0], {
    'content': document.createElement('p').innerHTML = 'HTML Element',
    'shownby': 'pointertap',
    'hiddenby': 'all'
});

var layerDom = new ch.Layer(ch('#dm_ly_dom')[0], {
    'content': ch('#dm_ly_dom_cnt')[0],
    'shownby': 'pointertap',
    'hiddenby': 'none'
});

var layerButton = new ch.Layer(ch('#dm_ly_btn')[0], {
    'content': 'Plain text',
    'shownby': 'pointertap',
    'hiddenby': 'button'
});

var layerAjax = new ch.Layer(ch('#dm_ly_ajax')[0], {
    'content': '/ajax.html',
    'shownby': 'pointertap',
    'hiddenby': 'pointers'
});

<h3>Modal with Ajax content</h3>
<a id="dm_mdl_lnk" href="/ajax.html">Modal</a>

<h3>Modal with DOM content</h3>
<button class="ch-btn ch-btn-small" id="dm_mdl_dom">Modal</button>

<h3>Modal lite</h3>
<button id="dm_mdl_lt" class="ch-btn ch-btn-small">Modal</button>

<h3>Modal inside a form without trigger</h3>
<form id="dm_mdl_frm" action="/ajax.html">
    <input class="ch-btn ch-btn-small" type="submit" value="Modal" />
</form>

<div class="ch-hide" id="dm_mdl_dom_cnt">
    <!-- [...] -->
</div>

var modalLink = new ch.Modal(ch('#dm_mdl_lnk')[0], {
    'width': '500px'
});

var modalDom = new ch.Modal(ch('#dm_mdl_dom')[0], {
    'content': ch('#dm_mdl_dom_cnt')[0]
});

var modalLite = new ch.Modal(ch('#dm_mdl_lt')[0], {
    'content': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
    'addClass': 'ch-modal-lite'
});

var modalForm = new ch.Modal({
    'hiddenby': 'button'
});

tiny.on('#dm_mdl_frm', 'submit', function (e) {
    e.preventDefault();
    modalForm.show('<h2>Heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>');
});

<input class="ch-btn ch-btn-small" id="dm_tr" value="Transition" type="submit" />

var transition = new ch.Transition(ch('#dm_tr')[0]);

<h3>Carousel default</h3>
<div id="dm_crs_df">
    <ul>
        <li>
            <img src="picture.png" />
        </li>
        <!-- [...] -->
    </ul>
</div>

<h3>Carousel with pagination</h3>
<div id="dm_crs_pg">
    <ul>
        <li>
            <img src="picture.png" />
        </li>
        <!-- [...] -->
    </ul>
</div>

<h3>Carousel with limit per page</h3>
<div id="dm_crs_lm">
    <ul>
        <li>
            <img src="picture.png" />
        </li>
        <!-- [...] -->
    </ul>
</div>

var carouselDefault = new ch.Carousel(ch('#dm_crs_df')[0]);

var carouselPagination = new ch.Carousel(ch('#dm_crs_pg')[0], {
    pagination: true
});

var carouselLimit = new ch.Carousel(ch('#dm_crs_lm')[0], {
    pagination: true,
    limitPerPage: 4
});

<div id="dm_cldr"></div>

var calendar = new ch.Calendar(ch('#dm_cldr')[0], {
    'selected': ['2017/01/22', '2017/01/21']
});

<input id="dm_dtpk" name="dm_dtpk" type="date" placeholder="MM/DD/YYYY" />

var datepicker = new ch.Datepicker(ch('#dm_dtpk')[0], {
    'selected': '2017/11/15',
    'to': 'today'
});

<textarea id="dm_codw" name="dm_codw" cols="35" rows="4"></textarea>

var countdown = new ch.Countdown(ch('#dm_codw')[0], {
    'max': 140,
    'plural': '# characters left',
    'singular': '# character left'
});

<form class="ch-form" id="dm_vl_frm" method="GET" action="/ajax.html">
    <fieldset>
        <legend>Input</legend>
        <p class="ch-form-hint">* Required fields</p>

        <div class="ch-form-row">
            <label for="dm_vl_opt">Text:</label>
            <input id="dm_vl_opt" name="dm_vl_opt" type="text" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_rqd">Text: <em>*</em></label>
            <input id="dm_vl_rqd" name="dm_vl_rqd" type="text" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_str_rqd">Letters: <em>*</em></label>
            <input id="dm_vl_str_rqd" name="dm_vl_str_rqd" type="text" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_em_rqd">E-mail: <em>*</em></label>
            <input id="dm_vl_em_rqd" name="dm_vl_em_rqd" type="email" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_url_rqd">URL: <em>*</em></label>
            <input id="dm_vl_url_rqd" name="dm_vl_url_rqd" type="url" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_num_rqd">Number: <em>*</em></label>
            <input id="dm_vl_num_rqd" name="dm_vl_num_rqd" type="number" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_num_mn_mx_rqd">Number: <em>*</em></label>
            <input id="dm_vl_num_mn_mx_rqd" name="dm_vl_num_mn_mx_rqd" type="number" min="1" max="99" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_cust">Custom: <em>*</em></label>
            <input id="dm_vl_cust" name="dm_vl_cust" type="text" required />
        </div>
    </fieldset>
    <fieldset>
        <legend>Textarea</legend>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_mnl_mxl">Textarea: <em>*</em></label>
            <textarea id="dm_vl_mnl_mxl" name="dm_vl_mnl_mxl" cols="20" rows="4" minlength="10" maxlength="40" required></textarea>
        </div>
    </fieldset>
    <fieldset>
        <legend>Select</legend>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_sel_rqd">Options: <em>*</em></label>
            <select id="dm_vl_sel_rqd" name="dm_vl_sel_rqd" required pattern="[^-1]">
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>
    </fieldset>
    <fieldset>
        <legend>Checkbox</legend>

        <h4 class="ch-form-subtitle">Option: <em>*</em></h4>
        <div>
            <div class="ch-form-options ch-form-required" id="dm_vl_cb_rqd_opt">
                <div class="ch-form-row">
                    <input id="dm_vl_cb_rqd" name="dm_vl_cb_rqd" type="checkbox" value="1" required />
                    <label for="dm_vl_cb_rqd">Option</label>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Checkbox group</legend>

        <h4 class="ch-form-subtitle">Options: <em>*</em></h4>
        <div class="ch-form-options ch-form-required" id="dm_vl_cb_grp_rqd_opt">
            <ul>
                <li class="ch-form-row">
                    <input id="dm_vl_cb_grp_rqd_1" name="dm_vl_cb_grp_rqd" type="checkbox" value="1" />
                    <label for="dm_vl_cb_grp_rqd_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="dm_vl_cb_grp_rqd_2" name="dm_vl_cb_grp_rqd" type="checkbox" value="2" />
                    <label for="dm_vl_cb_grp_rqd_2">Option 2</label>
                </li>
            </ul>
        </div>
    </fieldset>
    <fieldset>
        <legend>Radio group</legend>

        <h4 class="ch-form-subtitle">Options: <em>*</em></h4>
        <div class="ch-form-options ch-form-required" id="dm_vl_rd_grp_opt">
            <ul>
                <li class="ch-form-row">
                    <input id="dm_vl_rd_grp_1" name="dm_vl_rd_grp" type="radio" value="1" />
                    <label for="dm_vl_rd_grp_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="dm_vl_rd_grp_2" name="dm_vl_rd_grp" type="radio" value="2" />
                    <label for="dm_vl_rd_grp_2">Option 2</label>
                </li>
            </ul>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="dm_vl_smt" name="dm_vl_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>

var validationRequired = new ch.Validation(ch('#dm_vl_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        }
    ]
});

var validationString = new ch.Validation(ch('#dm_vl_str_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'string'
        }
    ]
});

var validationEmail = new ch.Validation(ch('#dm_vl_em_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'email'
        }
    ]
});

var validationUrl = new ch.Validation(ch('#dm_vl_url_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'url'
        }
    ]
});

var validationNumber = new ch.Validation(ch('#dm_vl_num_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'number'
        }
    ]
});

var validationNumberMinMax = new ch.Validation(ch('#dm_vl_num_mn_mx_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'number'
        },
        {
            'name': 'min',
            'num': 1
        },
        {
            'name': 'max',
            'num': 99
        }
    ]
});

var validationCustom = new ch.Validation(ch('#dm_vl_cust')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'charOne',
            'fn': function (val) {
                return val.toString().indexOf('1') !== -1;
            },
            'message': 'The field must contain a 1.'
        },
        {
            'name': 'charTwo',
            'fn': function (val) {
                return val.toString().indexOf('2') !== -1;
            },
            'message': 'The field must contain a 2.'
        }
    ]
});

var validationTextareaMinMax = new ch.Validation(ch('#dm_vl_mnl_mxl')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'minLength',
            'num': 10
        },
        {
            'name': 'maxLength',
            'num': 40
        }
    ]
});

var validationSelect = new ch.Validation(ch('#dm_vl_sel_rqd')[0], {
    'conditions': [
        {
            'name': 'required',
            'message': 'Select a valid option.'
        }
    ]
});

var validationCheckbox = new ch.Validation(ch('#dm_vl_cb_rqd_opt')[0], {
    'conditions': [
        {
            'name': 'required',
            'message': 'This option must be checked.'
        }
    ]
});

var validationCheckboxGroup = new ch.Validation(ch('#dm_vl_cb_grp_rqd_opt')[0], {
    'conditions': [
        {
            'name': 'required',
            'message': 'Select at least one option.'
        }
    ]
});

var validationRadioGroup = new ch.Validation(ch('#dm_vl_rd_grp_opt')[0], {
    'conditions': [
        {
            'name': 'required',
            'message': 'Select at least one option.'
        }
    ]
});