JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<link rel="stylesheet" href="http://vigneshnandhakumar.in/projects/js/jquery-suggestlist/css/suggestlist.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="https://rawgithub.com/sarathsprakash/jquery-suggestlist/master/js/jquery-suggestlist.js"></script>
<div class="modal hide fade" id="my-modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Some modal</h3>
    </div>

    <div class="modal-body" style="padding-top:50px; padding-bottom:100px;">
        <form>
            <input type="text" class="suggestlist" id="inputbox" value="30 min" />
        </form>
    </div>
</div>
<div style="padding:100px;">
    <button id="trigger-bootstrap-modal">Show modal</button>
</div>

CSS

#inputbox {
    display: block;
    margin: auto;
    width: 210px;
    height: 20px;
    padding: 4px;
}

JavaScript

$( '#inputbox' ).suggestlist({
    list: ['15 min', '30 min', '1 hr', '2 hr', '3 hr']
});
$('#trigger-bootstrap-modal').on('click', function() {
    $('#my-modal').modal();
});
$( '#my-modal' ).on( 'hidden', function() {
    $( this ).find( 'form' )[0].reset();
} );