JSFiddle - React, Tailwind, and code Playground

by adrienne

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://gist.github.com/raw/889400/knockout-jquery-ui-widget.js"></script>
<input data-bind='value: choice,
                  jqueryui: {
                      widget: "autocomplete",
                      options: {
                          source: options(),
                          minLength: 0,                        
                          select: function(event, ui) {
                              choice(ui.item.actualValue ? ui.item.actualValue : ui.item.value ? ui.item.value : "");
                          }                                
                      },
                  }'>

<hr>
<p data-bind='text: choice()'></p>
<hr>

CSS

button.dropdown-button {
    width: 16px;
    height: 16px;
    margin: 2px;
    vertical-align: top;
}

JavaScript

var b = {};

b.options = ko.observable([
    'Apple', 'Aardvark', 'Anteater', 
    'Bear', 'Bee', 
    'Cat', 'Canine', 'Crocodile'
]);

b.choice = ko.observable("");

ko.applyBindings(b);