JSFiddle - React, Tailwind, and code Playground

by Muhammad Raheel

HTML

<script src="https://raw.githubusercontent.com/raheelshan/knockout-search/master/knockout.search.js"></script>
<script src="https://raw.githubusercontent.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<select data-bind="htmlTemplate:Books"></select>
	<a href="#" data-bind="click:Test">Click Me</a> <br />
	<ul data-bind="htmlTemplate:Books1"></ul>

JavaScript

var page = function(){
		var self = this
		self.Books = ko.observableArray([])
		self.Books1 = ko.observableArray([])
		self.db = ko.observable()

		self.LoadData = function () {

			var booksArray = [	
				{Id:1,Rate:5,Price:200,Name:"History"},
				{Id:2,Rate:5,Price:150,Name:"Geographic"},
				{Id:3,Rate:1,Price:75,Name:"Maths"},
				{Id:4,Rate:2,Price:50,Name:"Statistics"},
				{Id:5,Rate:3,Price:120,Name:"Drawing"},
				{Id:6,Rate:2,Price:100,Name:"Arts"},
				{Id:7,Rate:3,Price:110,Name:"Chemistry"},
				{Id:8,Rate:4,Price:160,Name:"Biology"},
				{Id:9,Rate:4,Price:90,Name:"Software Engineering"},
				{Id:10,Rate:4,Price:80,Name:"Algorithm"},
				{Id:11,Rate:1,Price:85,Name:"Urdu"},
				{Id:12,Rate:1,Price:110,Name:"International Relations"},
				{Id:13,Rate:1,Price:120,Name:"Physics"},
				{Id:14,Rate:3,Price:230,Name:"Electronics"},
				{Id:15,Rate:3,Price:250,Name:"Jihad"},
				{Id:16,Rate:3,Price:200,Name:"Functional Programming"},
				{Id:17,Rate:2,Price:190,Name:"Computer Science"},
				{Id:18,Rate:2,Price:50,Name:"Problem solving Techniques"},
				{Id:19,Rate:6,Price:150,Name:"C#"},
				{Id:20,Rate:7,Price:250,Name:"ASP.Net"}
			]
			
			self.db(ko.search.setData(booksArray))
			var templates = self.db().supplant('<option value={Id} data-rate="{Rate}" data-price="{Price}">{Name}</option>').get()
			self.Books(templates)
			var templates1 = self.db().supplant('<li data-info="{Name}-{Rate}-{Price}">{Name}</li>').get()
			self.Books1(templates1)
		}

		self.Test = function () {
			return false
		}

		self.LoadData()
	}

	ko.bindingHandlers.htmlTemplate = {
	    init: function (element, valueAccessor) {
	        var items = ko.mapping.toJS(valueAccessor())
	        $(element).empty()
	        ko.utils.arrayForEach(items,function (item) {
	        	$(element).append(item.template)
	        })
	    },
	    update: function (element, valueAccessor) {
	        var items = ko.mapping.toJS(valueAccessor())
	        $(element).empty()
	       ...