JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<div class="ui-widget box">
    <span id="previewLabel">Preview:</span>
    <div id="preview" data-bind="text: selectedMember.shortName"></div>

    <div id="radio">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Short</label>
        <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Long</label>
    </div>
    <input id="memberList" data-bind="jqAuto: { autoFocus: true }, jqAutoSource: members,  jqAutoSourceLabel: 'lookupName', jqAutoSourceInputValue: 'longName', jqAutoValue : 'selectedMember', jqAutoCloseDialogAfterSelect:true" />
</div>

CSS

#radio { font-size: small; margin: 5px; }
#preview { padding: 10px; margin: 10px; border: 1px solid #cccccc; }
#previewLabel { color: #8a8a8a; background: white; position: relative; bottom: -18px; left: 15px; font-size: small; }
.box { padding: 10px; margin: 10px; border: 1px solid #cccccc; width: 250px; }

JavaScript

ko.bindingHandlers.jqAuto = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = valueAccessor() || {},
            allBindings = allBindingsAccessor(),
            unwrap = ko.utils.unwrapObservable,
            modelValue = allBindings.jqAutoValue,
            source = allBindings.jqAutoSource,
            query = allBindings.jqAutoQuery,
            valueProp = allBindings.jqAutoSourceValue,
            canCloseDialogAfterSelection = allBindings.jqAutoCloseDialogAfterSelect || false,
            inputValueProp = allBindings.jqAutoSourceInputValue || valueProp,
            labelProp = allBindings.jqAutoSourceLabel || inputValueProp;

        //function that is shared by both select and change event handlers

        function writeValueToModel(valueToWrite) {
            if (ko.isWriteableObservable(modelValue)) {
                modelValue(valueToWrite);
            } else { //write to non-observable
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['jqAutoValue']) {
                    allBindings['_ko_property_writers']['jqAutoValue'](valueToWrite);
                }
            }
        }

        //on a selection write the proper value to the model
        options.select = function(event, ui) {
            writeValueToModel(ui.item ? ui.item.actualValue : null);
            if (canCloseDialogAfterSelection) {
                $(element).parents().dialog("close");
            }

        };

        //on a change, make sure that it is a valid value or clear out the model value
        options.change = function(event, ui) {
            var currentValue = $(element).val();
            var matchingItem = ko.utils.arrayFirst(unwrap(source), function(item) {
                return unwrap(item[inputValueProp]) === currentValue;
            });

            if (!matchingItem) {
                writeValueToModel(null);
            }
        }

        //hold the autocomplete...