JSFiddle - React, Tailwind, and code Playground

by jaredoh

HTML

<html>


<div class="input-append">
    <input name="test" id="test"/>
    <button class="btn showAll" type="button">
        <i class="caret"></i> 
    </button>
</div>

</html>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.input-append input {
    height: 26px;
}

JavaScript

<script>

$(document).ready(function() {

    $("#test").typeahead({
        "source": ['Pennsylvania', 'Connecticut', 'New York', 'Maryland', 'Virginia'],
        //match any item
        matcher: function(item) {
            if (this.query == '*') {
                return true;
            } else {
                return item.indexOf(this.query) >= 0;
            }
        },
        //avoid highlightning of "*"
        highlighter: function(item) {
            return "<div>" + item + "</div>"
        }
    });

    // "select"-button
    $(".showAll").click(function(event) {
        var $input = $("#test");
            //add something to ensure the menu will be shown
            $input.val('*');
            $input.typeahead('lookup');
            $input.val('');
    });

});

</script>