JQuery&UI&Knockout Template

by gurkavcu

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<input data-bind="typeaheadAjax :{ url: query() , value : value, map : filter  }" type="text" class="input-small"></input>
<button data-bind="click:show"> Show </button>

CSS

.form-horizontal .control-group {
	  		margin-bottom: 5px;
		}
  
    .form-horizontal .controls {  
    	margin-bottom: 5px;
    }
		.form-horizontal .control-label {
		  /*width: 50px;*/
		  /*font-size: 12 px;*/
		}

		.dividerContainer {		
		    background-color:#fafafa;		   		 		
		    white-space:nowrap;
            margin-top:10px;
		}

		.divider {
		  border: 2px coral solid;		 		  
		  display:inline-table;
  		  padding-top:10px;
		}

		.optionDiv {
		  width: 30px;
		  display : inline;
		}

		.plus {
		  width: 20px;
		  height: 20px;
		}

		.minus {
		  width: 18px;
		  height: 18px;
		}

 .pre {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  border-width: 0; margin: 0; padding: 0; background: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0; margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
}

JavaScript

var viewModel ;

		var data = [ { "value" : '1', "name" : 'ahmet'  },
             		 { "value" : '2', "name" : 'hasan'  },
                     { "value" : '3', "name" : 'veli'  },
                     { "value" : '4', "name" : 'samet'  },
                     { "value" : '5', "name" : 'kaya'  }
        ];

		ko.bindingHandlers.typeaheadAjax = {
           state : {},    
		   init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
		       var options = valueAccessor();
               var map = function(data) {
            		return data.map(function(val,i){ return val['name'];});
               }; 
               options.value.subscribe(function(n){
                      for(var name in state)
                      { if (state.hasOwnProperty(name))
                          {  
                              if(state[name]["name"] === n) {                           
                                  options.value.ajaxValue = ko.observable(state[name]["value"]);
                              }
                          }
                      }
               });
		       $(element).typeahead({
		                   source : function(query,process) {                        
		                           return options.url(query).done(function (data) {                                       
                                       state = data;                                                                              
                                       return process(map(data));
		                           });
		                   },
		                   updater : function(newValue) {                             
		                           options.value(newValue);
		                           return newValue;
		                   }
		           });
		   }
		};	

        function testQuery() {
          return  $.post("/echo/json/", {
                        // Data send to server and echo back
                        json:...