JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 
<ul class="form-group">
    <li>
        <label for="Store_name">Address</label>
    </li>
    <li>
        <input type="text" class='street1 form-control' data-bind="autocompleteAddress: items, valueUpdate:'afterKeyDown', value: address().street1, attr:{placeholder: 'Enter street name'}"></input>
    </li>
    <li>
        <input type="text" data-bind="value: address().street2, attr:{placeholder: 'Enter street name'}" name="Address[street2]" class="street2 form-control" id="addressStreet2" />
    </li>
    <li>
        <div class="cell-space-bottom">
            <input type="text" data-bind="value: address().postal_code, attr:{placeholder: 'Postal'}" name="Address[postalCode]" class="postal-code form-control" id="addressPostalCode" />
            <input type="text" data-bind="value: address().city" name="Address[city]" placeholder="City name" class="city form-control" id="addressCity" />
        </div>
    </li>
    <li>
        <input type="text"   id="addressCountry" class="country form-control" data-bind="value: address().country, attr:{placeholder: 'Country'}" name="Address[country]" />
    </li>
</ul>

CSS

.wrapper {
    width: 300px;
}
.input-group {
    margin-bottom: 20px;
}
.glyphicon {
    float: right;
    cursor: pointer;
    color: #5577CC;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 220px;
}
.form-control {
    display: inline-block !important;
}
.form-control.postal-code {
    width: 60px;
}
.form-control.city {
    width: 155px;
}

JavaScript

// Retrieved from DB
var search_data = [
    {"id": "7186","street1": "Bose","street2": "","postal_code": "0521","city": "Oslo","country":"Norway"}, 
    {"id": "1069","street1": "BOSS Black","street2": "","postal_code": "0531","city": "Oslo","country":"Norway"}, 
    {"id": "1070","street1": "BOSS Green","street2": "","postal_code": "0522","city": "Oslo","country":"Norway"}, 
    {"id": "1074","street1": "Boston Brothers","street2": "","postal_code": "1121","city": "Oslo","country":"Norway"}, 
    {"id": "7678","street1": "Bosweel","street2": "","postal_code": "0821","city": "Oslo","country":"Norway"}
];

var site_url = 'www.mysite.com';
var Address = function (data) {
    this.address_id = ko.observable(data.id);
    this.street1 = ko.observable(data.street1);
    this.street2 = ko.observable(data.street2);  
    this.postal_code = ko.observable(data.postal_code);
    this.city = ko.observable(data.city);
    this.country = ko.observable(data.country);  
};

ko.bindingHandlers.autocompleteAddress = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        //console.log(valueAccessor()())
        var postUrl = site_url + allBindingsAccessor().source; // Not used here

        $(element).autocomplete({
            minLength: 2,
            source: function (request, response) {

                response(search_data);
            },
            select: function (e, ui) {
                //console.log(ui.item)
                viewModel.address(new Address(ui.item))
                 
                return false;
            }
        }).data("uiAutocomplete")._renderItem = function (ul, item) {
            return jQuery("<li></li>")
                .data("ui-autocomplete", item)
                .append("<a>" + item.street1 + ' ' + item.city + "</a>")
                .appendTo(ul);
        }

    }
};

 
var vm = {
    items: ko.observableArray(search_data),
    address:...