jQM with selectize

by Erik Zanker

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css">
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page</h1> 
    </div> 	
    <div role="main" class="ui-content">

        <select id="mySelect" data-role="none" placeholder="Select an option..." >
            <option value="">Select an option...</option> 
            <option value="1">Option 1</option>            
            <option value="2">Option 2</option>   
            <option value="3">Option 3</option>   
            <option value="4">Option 4</option>   
        </select>

        <button>jQM button</button>
        
        <ul data-role="listview" data-inset="true">
            <li>item 1</li>
            <li>item 2</li>
        </ul>
        
        <input type-"text" />
    </div>
     <div data-role="footer" data-position="fixed">
        <h1>Footer</h1> 
    </div>     
</div>

JavaScript

$(document).on("pagecreate", "#page1", function(){ 
    
    $('#mySelect').selectize({
        create: true,
        sortField: 'text'
    });
    
});