はてなブログにJavaScript（jQuery）で表の絞り込み検索を実装する方法

表の絞り込み検索の完成イメージ

前回のエントリーを参照して頂いても良いですが、完成イメージは以下の感じです。

knowledge.moshimore.jp

共通部分など

jQueryを使用するので、[ブログの設定]→[詳細設定]→[headに要素を追加]へ以下を追加します。

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

検索から漏れた行を非表示にするためのスタイルシートと表を埋め込む部分を用意します。この場合、<div id=”book”></div>に表が埋め込まれます。

<style><!--
.no-title { display: none; }
--></style>
<form><label for="book-search">タイトル : </label> <input id="book-search" type="text" placeholder="キーワード" /></form></div>
<div id="book"></div>

表の作成と絞り込み検索処理

dataに表へ埋め込みたいデータを2次元配列で定義してあります。列の件数は全て同じにしておかないと表が崩れてしまうので注意が必要です。

12行目の「row.setAttribute(“data-title”, data[i][4]);」の「4」と定義してある部分は、検索するデータの列番号を表しています。列番号は、0から始まっているので、見た目上は5になります。

<script type="text/javascript">// <![CDATA[
var data = [["単行本", "話", "大全集", "話", "タイトル"],
["1巻", "第1話", "1巻", "第2話", "未来の国からはるばると"],
["1巻", "第2話", "1巻", "第3話", "ドラえもんの大予言"],
["1巻", "第3話", "2巻", "第52話", "変身ビスケット"],
["1巻", "第4話", "1巻", "第9話", "まる秘スパイ大作戦"],
];
var table = document.createElement("table");
for (i = 0; i < data.length; i++)
{
var row = table.insertRow(i);
row.setAttribute("data-title", data[i][4]);
row.setAttribute("class", "title");
for (j = 0; j < data[i].length; j++)
{
var cell = row.insertCell(j);
cell.appendChild(document.createTextNode(data[i][j]));
}
}
document.getElementById("book").appendChild(table);
$(function ()
{
searchBook = function()
{
$('.title').removeClass('no-title');
var searchText = $(this).val();
if (searchText === '') return;
var count = 0;
$('.title').each(function()
{
if (count > 0)
{
var targetText = $(this).data('title');
if (targetText.indexOf(searchText) < 0)
{
$(this).addClass('no-title');
}
}
count++;
});
};
$('#book-search').on('input', searchBook);
});
// ]]></script>

2次元配列のデータの定義の仕方と検索するデータの列番号さえ間違えなければ応用可能なので、是非、利用してみてください。