PHPでCSVリアルタイム検索を作る方法【サンプルコード付き】

php

PHPでCSVリアルタイム検索を作る方法

PHPでCSVファイルを読み込み、入力したキーワードに合わせて検索結果をリアルタイムに表示する方法を紹介します。検索ボタンを押さなくても、文字を入力するたびに該当するデータだけを一覧表示できます。データベースを使わずに、CSVだけでリアルタイム検索機能を作りたい場合に使えるサンプルコードです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ID 名前 カテゴリー メールアドレス

コードをコピーして使おう！

<?php

$keyword = trim($_GET['keyword'] ?? '');

$rows = [];

if (file_exists('data.csv')) {

    if (($fp = fopen('data.csv', 'r')) !== false) {

        while (($data = fgetcsv($fp)) !== false) {

            if (
                $keyword === '' ||
                stripos(implode(' ', $data), $keyword) !== false
            ) {
                $rows[] = $data;
            }

        }

        fclose($fp);

    }

}

if (
    isset($_GET['ajax']) &&
    $_GET['ajax'] === '1'
) {

    foreach ($rows as $row) {

        echo '<tr>';
        echo '<td>' . htmlspecialchars($row[0], ENT_QUOTES, 'UTF-8') . '</td>';
        echo '<td>' . htmlspecialchars($row[1], ENT_QUOTES, 'UTF-8') . '</td>';
        echo '<td>' . htmlspecialchars($row[2], ENT_QUOTES, 'UTF-8') . '</td>';
        echo '<td>' . htmlspecialchars($row[3], ENT_QUOTES, 'UTF-8') . '</td>';
        echo '</tr>';

    }

    exit;

}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSVリアルタイム検索</title>

<style>

body{
    font-family:sans-serif;
    margin:20px;
}

.search-input{
    width:100%;
    max-width:600px;
    padding:14px 16px;
    border:1px solid #d1d5db;
    border-radius:10px;
    font-size:16px;
    margin-bottom:24px;
    box-sizing:border-box;
}

.table-wrap{
    border:1px solid #e5e7eb;
    border-radius:20px;
    overflow:hidden;
}

table{
    width:100%;
    border-collapse:collapse;
}

th{
    background:#f7f2e5;
}

th,
td{
    padding:20px;
    text-align:left;
    border-bottom:1px solid #e5e7eb;
}

</style>

</head>
<body>

<input
    type="text"
    id="keyword"
    class="search-input"
    placeholder="文字を入力するとリアルタイム検索します">

<div class="table-wrap">

<table>

    <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>カテゴリー</th>
            <th>メールアドレス</th>
        </tr>
    </thead>

    <tbody id="result">

    <?php foreach ($rows as $row): ?>

        <tr>
            <td><?= htmlspecialchars($row[0], ENT_QUOTES, 'UTF-8') ?></td>
            <td><?= htmlspecialchars($row[1], ENT_QUOTES, 'UTF-8') ?></td>
            <td><?= htmlspecialchars($row[2], ENT_QUOTES, 'UTF-8') ?></td>
            <td><?= htmlspecialchars($row[3], ENT_QUOTES, 'UTF-8') ?></td>
        </tr>

    <?php endforeach; ?>

    </tbody>

</table>

</div>

<script>

const keyword = document.getElementById('keyword');
const result = document.getElementById('result');

keyword.addEventListener('input', async () => {

    const response = await fetch(
        '?ajax=1&keyword=' +
        encodeURIComponent(keyword.value)
    );

    result.innerHTML = await response.text();

});

</script>

</body>
</html>

ファイル構成と設置方法

このサンプルで使用するファイル構成です。
下記のファイルを同じフォルダ（同じ階層）へ配置してください。 

sample/
├─ index.php
└─ data.csv

サーバーへ設置する場合は、index.php と data.csv を同じフォルダへアップロードしてください。

このサンプルでは data.csv を読み込みながらリアルタイム検索を行います。CSVファイルを別フォルダへ配置する場合は、PHPコード内のファイルパスを変更してください。

PHPはサーバー上で実行されるため、index.php をダブルクリックしても動作しません。動作確認はレンタルサーバーへアップロードするか、PHPが利用できるローカル環境で行ってください。

コメント