🔍 カタカナ対応リアルタイム検索
📝 使い方
このページは,ひらがな・カタカナ両対応のリアルタイムフィルターです。
- 検索欄に「りんご」と入力すると,「りんご」「リンゴジュース」などがリアルタイムで表示されます。
- 「リンゴ」や「ﾘﾝｺﾞ（半角カナ）」でも同様にヒットします。
- 内部でカタカナ→ひらがな変換を行って比較しているため,表記ゆれを吸収します。
下のコピペ欄からHTMLコードをコピーして,あなたのページや学習教材などに自由に使えます。
- りんご
- バナナ
- みかん
- ぶどう
- スイカ
- パイナップル
- メロン
- リンゴジュース
- OpenAI
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>リアルタイムフィルター（カナ対応）</title>
<style>
body { font-family: sans-serif; padding: 2rem; max-width: 600px; margin: auto; }
input[type="text"] {
width: 100%; padding: 10px; font-size: 1.1rem; margin-bottom: 1rem;
border: 1px solid #ccc; border-radius: 5px;
}
ul { list-style-type: none; padding: 0; }
li { padding: 8px; border-bottom: 1px solid #ddd; }
.hidden { display: none; }
</style>
</head>
<body>
<h1>🔍 カタカナ対応リアルタイム検索</h1>
<input type="text" id="filterInput" placeholder="キーワードを入力（例：りんご or リンゴ）">
<ul id="itemList">
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
<li>ぶどう</li>
<li>スイカ</li>
<li>パイナップル</li>
<li>メロン</li>
<li>リンゴジュース</li>
<li>OpenAI</li>
</ul>
<script>
function toHiragana(str) {
return str.replace(/[\u30a1-\u30f6]/g, function (match) {
return String.fromCharCode(match.charCodeAt(0) - 0x60);
});
}
const input = document.getElementById("filterInput");
const items = document.querySelectorAll("#itemList li");
input.addEventListener("input", () => {
const keyword = toHiragana(input.value.trim().toLowerCase().normalize("NFKC"));
items.forEach(item => {
const text = toHiragana(item.textContent.toLowerCase().normalize("NFKC"));
item.classList.toggle("hidden", !text.includes(keyword));
});
});
</script>
</body>
</html>
🔧 表記ゆれ・語尾の違いにも強いリアルタイム検索の工夫
通常のリアルタイム検索では、ユーザーが入力したキーワードと
完全に一致していないとヒットしないケースが多く見られます。
たとえば「みる」「見た」「見る」など、
語尾や送り仮名の違いが原因で検索漏れが発生することがあります。
このテンプレートでは、カタカナ⇔ひらがな変換に加え、
- 全角・半角の正規化（
normalize("NFKC")） - 小文字・大文字の統一（
.toLowerCase()） - 語幹マッチングを意識した部分一致処理
を組み合わせることで、検索の精度と許容度を高めています。
実際に「ミカンジュース」と入力しても「みかん」や「蜜柑100％」「ミカン味」などがヒットするように設計できます。
このような工夫により、教育アプリや 商品検索サイトなどでも、 表記の揺れに強い快適な検索体験を実現できます。
UI/UXの改善だけでなく、 アクセシビリティ向上にも寄与するため、 今後も様々な現場で活用が期待される技術です。