JSFiddle - React, Tailwind, and code Playground

by spstieng

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" 
            data-bind="autocompleteAddress: {source: '/address/autocompleteAddress'}" 
            name="Address[street1]" 
            value="Stovner Senter 3" 
            placeholder="Enter street name" 
            class="street1 form-control ui-autocomplete-input" 
            autocomplete="off" />
    </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

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';

ko.bindingHandlers.autocompleteAddress = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {        
        var postUrl = site_url + allBindingsAccessor().source; //Not used here
        var self = viewModel;        
        
        $(element).autocomplete({
            minLength: 2,
            source: function (request, response) {
                response(search_data);
            },
            select: function (e, ui) {
                var item = ui.item;
                
            }
        }).data("uiAutocomplete")._renderItem = function (ul, item) {
            return jQuery("<li></li>")
                .data("ui-autocomplete", item)
                .append("<a>" + item.street1 + ' ' + item.city + "</a>")
                .appendTo(ul);
        }

    }
};