JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="http://vigneshnandhakumar.in/projects/js/jquery-suggestlist/js/jquery-suggestlist.js"></script>
<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>
<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>

<!--
Issue #1) When used inside a modal (overlay), and when the modal is closed and reopened, the last chosen item from the list remains selected though the input box value gets reset. To reproduce the bug, do the following at http://jsfiddle.net/pS3G9/114/

1) Click the "Show modal" button to open the modal
2) In the input box, choose a value different from the default one
3) Close the modal and reopen

Now, though the value seen in the input box is reset to "30 min" (the default value), the suggestion list has not been updated (if you click in the input box, you will see that the old option you chose before closing the modal is active). The plugin should ensure that the active selection also gets reset to default (30 min).


Issue #2) When you type in the input box manually, the corresponding item from the list gets selected only after the entire string matches. Can we make it such that as soon as you start typing, the first item that starts with the entered value gets selected?

Please create a revised version of jquery-suggestlist that solves these issues. You can...

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();
} );