<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>馬拉松成績速查</title>
<style>
body { font-family:'Arial Unicode MS' }
.hdr { padding: 12px; font-size: 16pt; background-color: #0094ff; color: white; }
.query { padding: 6px; }
.title { margin-right: 6px; }
.keywd { width: 100px; padding: 3px; }
</style>
</head>
<body>
<div class="hdr">
2014渣打公益馬拉松 成績速查
</div>
<div class="query">
<select data-bind="options: Groups, value: Group"></select>
<label class="title">號碼布</label>
<input type='text' class="keywd"
data-bind="value: RunnerNo, valueUpdate: 'afterkeyup', event: { keyup: onKeyUp }" />
(按ESC清除)
</div>
<div class="hints">
<ul data-bind="foreach: Hints">
<li><span data-bind="text: no"></span> -
<span data-bind="text: time"></span></li>
</ul>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js "></script>
<script src="Chartered2014-42K.js"></script>
<script src="Chartered2014-21K.js"></script>
<script>
function myViewModel() {
var self = this;
self.RunnerNo = ko.observable("");
self.onKeyUp = function (d, e) {
if (e.which == 27)
{
self.RunnerNo("");
}
};
self.Hints = ko.observableArray();
self.Groups = ko.observableArray();
self.Group = ko.observable();
self.DataGroups = {};
for (var grpName in dataSource) {
var records = dataSource[grpName];
var data = $.map(Object.keys(records).sort(), function (n) {
return { no: n, time: records[n] };
});
self.DataGroups[grpName] = data;
self.Groups.push(grpName);
}
self.Data = ko.computed(function () {
return self.DataGroups[self.Group()];
});
ko.computed(function () {
var key = self.RunnerNo();
if (key.length == 0 || isNaN(key)) {
self.Hints([]);
return;
}
var count = 0;
var data = self.Data.peek();
var res = [];
$.each(data, function (i, item) {
if (count >= 10) return false;
if (item.no.indexOf(key) == 0) {
count++;
res.push(item);
}
});
self.Hints(res);
}).extend({ throttle: 100 });
}
var vm = new myViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>