<form method="get" action="http://www.mercadolibre.com.ar/jm/search" class="ch-form">
    <input type="text" name="as_word" class="autocomplete" />
    <input type="submit" name="autocompleteSubmit" class="ch-btn">
</form>

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

<h4 class="demo_expandable1 ch-expandable-trigger">Lorem ipsum dolor sit amet.</h4>
<div class="ch-hide">
    <div>
        <!-- Expandable content -->
        ...
    </div>
</div>

<h4 class="demo_expandable2">Lorem ipsum dolor sit amet.</h4>
<div class="container_expandable2"><!-- Content will load with Ajax --></div>

var expandable1 = new ch.Expandable(document.querySelector('.demo_expandable1'));

var expandable2 = new ch.Expandable(document.querySelector('.demo_expandable2'), {
    'content': '/chico/ajax.html',
    'container': document.querySelector('.container_expandable2')
});
expandable2.on('contentdone', function () {
    console.log('Content loaded for component ' + this.uid);
});

<ul class="demo-menu ch-menu">
    <li>
        <span>Collapsible</span>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <span>Collapsible</span>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>

var menu = new ch.Menu(document.querySelector('.demo-menu'));

<h3 class="demo-dropdown1">Default</h3>
<menu label="Links" class="ch-hide">
    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
    ...
</menu>

<i class="ch-icon-heart demo-dropdown2"></i>
<ul class="ch-hide">
    <li>
        <img src="..." />
        ...
    </li>
    ...
</ul>

<p class="demo-dropdown3">With skin</p>
<menu label="Links" class="ch-hide">
    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
    ...
</menu>

var dropdown1 = new ch.Dropdown(document.querySelector('.demo-dropdown1'));
var dropdown2 = new ch.Dropdown(document.querySelector('.demo-dropdown2'), {
    'shortcuts': false,
    'skin': true
});
var dropdown3 = new ch.Dropdown(document.querySelector('.demo-dropdown3'), {
    'skin': true
});

<span id="layer1">...</span>
<span id="layer2">...</span>
...

<div id="invisible-content-for-layer" class="ch-hide">
    <h1>This content is invisible</h1>
    <p>...</p>
</div>

var layer1 = new ch.Layer(ch('#layer1')[0], {
    'content': 'foo'
});

var layerContent = document.createElement('p');
layerContent.innerHTML = 'This is an HTML P Element as content.';
var layer2 = new ch.Layer(ch('#layer2')[0], {
    'content': layerContent,
    'shownby': 'pointertap',
    'hiddenby': 'all'
});

var layer3 = new ch.Layer(ch('#layer3')[0], {
    'content': ch('#invisible-content-for-layer')[0],
    'shownby': 'pointertap',
    'hiddenby': 'none'
});

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

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

var layerX = new ch.Layer({
    'content': 'Layer without trigger!',
    'reference': ch('#layer5')[0]
});

<button id="bubble1" class="ch-btn ch-btn-small">Show an error message</button>

var bubble = new ch.Bubble(ch('#bubble1')[0], {
    content: 'Check the information, please.'
});
tiny.on('#bubble1', 'click', function(e) {
    bubble.show();
});

<a id="modal1" href="/ajax.html">Executed by a link</a>

<button id="modal2" class="ch-btn ch-btn-small">Get content from DOM</button>
<div id="invisible-content" class="ch-hide">
    ...
</div>

<button id="modal3" class="ch-btn ch-btn-small">Show me</button>

<form id="modal-form" action="/ajax.html">
    <input id="modalX" type="submit" class="ch-btn ch-btn-small" value="Executed by submit a form"/>
</form>

var modal1 = new ch.Modal(ch('#modal1')[0], {
    'width': '500px',
    'height': '300px'
});
// Modal with invisible DOM Content
var modal2 = new ch.Modal(ch('#modal2')[0], {'content': document.querySelector('#invisible-content')});
// Modal lite
var modal3 = new ch.Modal(ch('#modal3')[0], {
    'content': '<h2>Heading or content</h2>',
    'addClass': 'ch-modal-lite'
});
var modalX = new ch.Modal({
    'hiddenby': 'button'
});
tiny.on('#modal-form', 'submit', function (e) {
    e.preventDefault();
    modalX.show('<h2>Heading or content</h2><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus bibendum consectetur dignissim.</p>');
});

<input type="submit" id="transition" class="ch-btn ch-btn-small" value="Execute it!">

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

<a id="zoom-default" class="zoom" href="html5-logo-big.png" target="_blank">
    <img src="html5-logo-medium.png" alt="HTML5"/>
</a>

<a id="zoom-preload" class="zoom" href="html5-logo-big.png" target="_blank">
    <img src="html5-logo-medium.png" alt="HTML5"/>
</a>

var zoom1 = new ch.Zoom(ch('#zoom-default')[0]);

var zoom2 = new ch.Zoom(ch('#zoom-preload')[0]);
// Preload image
zoom2.loadImage();

<div class="demo-carousel ch-carousel">
    <ul>
        <li><img src="img.png"></li>
        <li><img src="img.png"></li>
        ...
    </ul>
</div>

var carousel = new ch.Carousel(ch('.demo-carousel')[0], {
    pagination: true
});

<div class="demo-tabs ch-tabs">
    <ul class="ch-tabs-triggers">
        <li><a href="#tab1-a" class="ch-tab">Tab1</a></li>
        ...
        <li><a href="/ajax.html#ajax-a" class="ch-tab">Tab4</a></li>
    </ul>
    <div class="ch-box-lite">
        <div id="tab1-a">
            <p>....</p>
        </div>
        ...
        <!-- There is no container for content which loads via Ajax -->
    </div>
</div>

var tabs = new ch.Tabs(ch(".demo-tabs")[0]);

<div class="demo-calendar"></div>

var calendar = new ch.Calendar(ch('.demo-calendar')[0], {
    'selected': ['2015/01/22','2015/01/21']
});

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

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

<textarea id="text_cd" cols="35" rows="4"></textarea>

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

<form>
    <div class="ch-form-row">
        <label for="input_ico">Icon:</label>
        <input type="text" id="input_ico" name="input_ico" size="30"
               placeholder="">
        <i class="ch-form-icon ch-icon-help-sign"></i>
    </div>
</form>

var form = new ch.Form(ch('.myForm')[0])
    .on('success', function (event) {
        event.preventDefault();
        // Do something
    })
    .on('error', function (errors) {
        // Do another thing
    });

var  validation1 = new ch.Validation(ch('#input_ico')[0], {
    'conditions': [
        {'name': 'required'},
        {'name': 'string'}
    ],
    'reference': ch('#input_ico + .ch-form-icon.ch-icon-help-sign')[0]
});

<form action="/" class="ch-wizard">
    <ol class="ch-wizard-breadcrumb ch-steps-four">
        <li><a href="#1">Step 1</a></li>
        <li><a href="#2">Step 2</a></li>
        <li class="ch-wizard-current">Step 3</li>
        <li class="ch-wizard-step">Step 4</li>
    </ol>
    <div class="ch-box-container">
        <h2>Caption heading</h2>

        <p>...</p>
    </div>

    <div class="ch-actions">
        <button type="submit" class="ch-btn">Primary Action</button>
        <a href="#">Secondary Action</a>
    </div>
</form>