JSFiddle - React, Tailwind, and code Playground

by sherin81

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>
<div class="wrapper">
    
  <div class="input-group">
    <input type="hidden" value="" data-bind="value: item_id" />
    <input class="form-control" type="search" data-bind="value: item_name, autoComplete: items" />     
      
    <span class="input-group-btn">
      <button class="btn" data-bind="click: addItem, enable: function(){ item_name().length > 0;}">Add</button>
    </span>
  </div>

  <ul class="list-group" data-bind="template: { name: 'item-template', data: $root.items}">
    <li class="list-group-item">
      <span id="123" data-bind="text: item_name, attr: {'id': item_id}">Americanino</span>
      <span class="glyphicon glyphicon-remove-circle" data-bind="click: $parent.removeItem"></span>
    </li>      
      
    <li class="list-group-item">
      <span id="223" data-bind="text: item_name, attr: {'id': item_id}">Asos</span>
      <span class="glyphicon glyphicon-remove-circle" data-bind="click: $parent.removeItem"></span>
    </li>            
  </ul>    
<button class="btn" data-bind="click: sortItems">Sort (ASC)</button>
  <script type="text/html" id="item-template">
    <!--ko foreach: $data-->    
      <li class="list-group-item">
        <span id="" data-bind="text: item_name, attr: {'id': item_id}"></span>
        <span class="glyphicon glyphicon-remove-circle" data-bind="click: $root.removeItem"></span>
      </li>            
    <!-- /ko -->
  </script>  
</div>

CSS

.wrapper {
    width: 300px;
}

.input-group {
    margin-bottom: 20px;        
}

.glyphicon {
    float: right;
    cursor: pointer;
    color: #5577CC;
}

.ui-helper-hidden-accessible {
    display: none;
}

JavaScript

// Retrieved from DB
var search_data = [
    {"id":"7186","name":"Bose"},
    {"id":"1069","name":"BOSS Black"},
    {"id":"1070","name":"BOSS Green"},
    {"id":"1071","name":"BOSS Hugo Boss"},
    {"id":"1072","name":"BOSS Orange"},
    {"id":"1074","name":"Boston Brothers"},
    {"id":"7678","name":"Bosweel"}
];

ko.bindingHandlers.autoComplete = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var selectedObservableArrayInViewModel = valueAccessor();
        var self = viewModel;
        
        //self.item_id = ko.observable();
        //self.item_name = ko.observable();    
        
        $(element).autocomplete({
            minLength: 2,
            source: function (request, response) {
              response(search_data);
            },
            select: function(e, ui){
                var item = ui.item;
                self.item_name(item.name);
                self.item_id(item.id);
                return false;
                //self.addItem();
            }
        }).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
            return jQuery( "<li></li>" )
            .data( "ui-autocomplete", item )
            .append( "<a>"+ item.name + "</a>" )
            .appendTo( ul );
        }
        
    }
};

function item(id, name){
    var self = this;
    self.item_id = ko.observable(id);
    self.item_name = ko.observable(name);    
}

function create_list(exiting_list){
    var arr_list = [];
    
    $(exiting_list).find('li').each(function(e,li){
        var id = $(li).find('span').prop('id');
        var name = $(li).find('span').html();
        arr_list.push(new item(id, name));
    });
    return arr_list;
}

var itemListModel = function() {
    var self = this;
    
    // Data
    var exiting_list = $('.list-group').clone();        
    self.items = ko.observableArray(create_list(exiting_list));
    self.item_name = ko.observable('');
    self.item_id =...