knockout.jsでデータの検索ができるようにする

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>knockout.jsでデータの検索ができるようにする</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     ko.applyBindings(new ViewModel());
  11.   });
  12.   function ViewModel() {
  13.     var self = this;
  14.     self.jsonTemporary = {};
  15.     self.jsonData = ko.observable();
  16.     self.search = ko.observable();
  17.     self.loading = ko.observable(true);
  18.     self.result = ko.observable();
  19.     // 表示
  20.     self.GotoView = function(json) {
  21.       if (json["item"].length != 0)
  22.       {
  23.         this.jsonData(json.item);
  24.       }
  25.       else
  26.       {
  27.         this.jsonData("");
  28.       }
  29.       this.loading(false);
  30.     };
  31.     // 検索ボタンが押されたとき
  32.     self.RunSearch = function(e) {
  33.       e.loading(true);
  34.       e.result();
  35.       if (e.search() == "" || e.search() == undefined)
  36.       {
  37.         // 何も入力されていない
  38.         self.GotoView(e.jsonTemporary);
  39.       }
  40.       else
  41.       {
  42.         jsonSearch = getJsonOfSearchWord(e.jsonTemporary, e.search());
  43.         self.GotoView(jsonSearch);
  44.         
  45.         if (jsonSearch["item"].length != 0)
  46.         {
  47.           e.result("「" + e.search() + "」を含む結果");
  48.         }
  49.         else
  50.         {
  51.           e.result("「" + e.search() + "」を含む結果がありません(「味」が検索対象)");
  52.         }
  53.       }
  54.     };
  55.     // デフォルトでの表示:元データを読込んでおく
  56.     $.getJSON("./testdata/testdataC.txt", {}, function(json){
  57.         self.jsonTemporary = json; // 何回も読込みされるのがイヤなので保管しておく
  58.         self.GotoView(self.jsonTemporary);
  59.       }
  60.     );
  61.   }
  62.   // 検索ワードを含むデータだけ返す
  63.   function getJsonOfSearchWord(ary, search)
  64.   {
  65.     returnAry = {"item":[]};
  66.     for (var i in ary["item"])
  67.     {
  68.       if (ary["item"][i]["taste"].match(search) != null)
  69.       {
  70.         returnAry["item"].push(ary["item"][i]);
  71.       }
  72.     }
  73.     return returnAry;
  74.   }
  75. </script>
  76. <style type="text/css">
  77. table{margin-top:0.5em;}
  78. th, td{
  79.   border:1px solid #ccc;
  80. }
  81. td
  82. {
  83.   padding:8px;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <h1>knockout.jsでデータの検索ができるようにする</h1>
  89. <div class="wrap">
  90.   味を検索:<input type="text" data-bind="value: search" /><button data-bind="click: RunSearch">検索</button><br />
  91.   <small>※検索の対象は「味」だけにしています</small><br />
  92.   <div data-bind="visible: loading()" style="padding:15px 10px;">
  93.   <!-- 「http://www.ajaxload.info/」で画像作成。 -->
  94.   <img src="images/ajax-loader.gif" /><br />
  95.   </div>
  96.   <h2 data-bind="visible: result, text: result"></h2>
  97.   <table data-bind="visible: jsonData()">
  98.     <thead><tr><th>品名</th><th>金額</th><th>味</th></thead>
  99.     <tbody data-bind="foreach: jsonData">
  100.       <tr>
  101.         <td data-bind="text: name"></td>
  102.         <td data-bind="text: price"></td>
  103.         <td data-bind="text: taste"></td>
  104.       </tr>
  105.     </tbody>
  106.   </table>
  107. </div>
  108. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  109. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  110. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  111. </div>
  112. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  113. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  114. </div>
  115. </body>
  116. </html>