JSFiddle - React, Tailwind, and code Playground

by runjep

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<form class=" input-append">
    <div class="btn-group"> <span data-bind="click:dropClick,visible:btnVisible" class="btn btn-large">Google <span class="caret"></span></span>
        <ul class="dropdown-menu">
            <li><a href="#">a</a>

            </li>
            <li><a href="#">b</a>

            </li>
        </ul>
        <input type="text" data-bind="value:queryString,hasfocus:searchFocus,visible:!btnVisible()" class="input-xlarge" placeholder="Search">
    </div>
</form>

CSS

form .input-xlarge {
    padding: 11px 19px;
    /* equal to btn-large */
}

JavaScript

var ViewModel = function (items) {
    this.queryString = ko.observable('');
    this.searchFocus = ko.observable(false);
    this.notChosen = ko.observableArray(items);
    this.chosen = ko.observableArray();
    this.btnVisible = ko.observable(true);
    this.dropClick = function () {
        this.btnVisible(false);
        this.searchFocus(true);
        //        setTimeout(function(){alert("Hello")},3000);
        //   setTimeout(function(){sf(true);},10);
    }
}
ko.applyBindings(new ViewModel([
    'Australia',
    'Brazil',
    'Canada',
    'Denmark',
    'Estonia', ]));