דף לחיפוש הודעת מערכת

יהודה צ. כ.

תגובה: הסוף לשוטט אחר הודעת מערכת! נא ונא לא להגיב!!!
בתגובה לפוסט המצוטט, יצרתי דף שמחובר לקובץ json המאפשר:

חיפוש לפי מספר /חלק ממספר ההודעה.
חיפוש לפי מילות / חלק ממילות ההודעה.

בהצלחה.

הקובץ של ההודעות נוצר באמצעות ai, באם ישנן טעויות נא להגיב כאן.

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>חיפוש הודעות מערכת</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #f4f8fa;
            color: #26343b;
            font-family: Arial, "Noto Sans Hebrew", sans-serif;
        }

        .page {
            width: min(900px, calc(100% - 30px));
            margin: 55px auto;
        }

        .header {
            margin-bottom: 28px;
        }

        .header h1 {
            margin: 0 0 8px;
            font-size: 30px;
            font-weight: 600;
            color: #173b4b;
        }

        .header p {
            margin: 0;
            color: #71828a;
            font-size: 15px;
        }

        .search-box {
            background: #ffffff;
            border: 1px solid #d9e6eb;
            padding: 18px;
            box-shadow: 0 3px 12px rgba(40, 90, 110, 0.06);
        }

        .search-row {
            display: flex;
            gap: 10px;
        }

        #searchInput {
            flex: 1;
            min-width: 0;
            height: 48px;
            border: 1px solid #cbdde4;
            background: #fbfdfe;
            padding: 0 15px;
            font-size: 16px;
            color: #26343b;
            outline: none;
            transition: border-color .15s, box-shadow .15s;
        }

        #searchInput:focus {
            border-color: #72c6df;
            box-shadow: 0 0 0 3px rgba(114, 198, 223, .15);
        }

        #searchButton {
            height: 48px;
            padding: 0 25px;
            border: 0;
            background: #67bdd8;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background .15s;
        }

        #searchButton:hover {
            background: #51aecb;
        }

        .info {
            margin-top: 13px;
            color: #84939a;
            font-size: 13px;
        }

        #results {
            margin-top: 22px;
        }

        .result-count {
            margin-bottom: 12px;
            color: #60747d;
            font-size: 14px;
        }

        .result {
            background: #fff;
            border: 1px solid #dce8ec;
            margin-bottom: 10px;
            padding: 16px 18px;
            transition: border-color .15s, box-shadow .15s;
        }

        .result:hover {
            border-color: #b8dce7;
            box-shadow: 0 2px 8px rgba(40, 90, 110, 0.05);
        }

        .result-id {
            display: inline-block;
            direction: ltr;
            color: #2994b5;
            font-family: monospace;
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 7px;
        }

        .result-text {
            line-height: 1.7;
            font-size: 16px;
            color: #33464e;
        }

        .empty {
            background: #fff;
            border: 1px solid #dce8ec;
            padding: 30px 20px;
            text-align: center;
            color: #788990;
        }

        .loading {
            color: #6f858e;
            padding: 15px 0;
        }

        @media (max-width: 600px) {
            .page {
                width: calc(100% - 20px);
                margin: 30px auto;
            }

            .header h1 {
                font-size: 25px;
            }

            .search-row {
                flex-direction: column;
            }

            #searchButton {
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="page">

    <header class="header">
        <h1>חיפוש הודעות מערכת</h1>
        <p>חיפוש מהיר לפי מספר הודעה או לפי מילים מתוך תוכן ההודעה</p>
    </header>

    <section class="search-box">
        <div class="search-row">
            <input
                id="searchInput"
                type="search"
                placeholder="לדוגמה: M3337 או צינתוק"
                autocomplete="off"
            >
            <button id="searchButton" type="button">חיפוש</button>
        </div>

        <div class="info">
            ניתן לבצע גם חיפוש חלקי. לדוגמה: 3337, צינתוק, מנהל
        </div>
    </section>

    <section id="results"></section>

</div>

<script>
    let messages = [];

    const input = document.getElementById("searchInput");
    const button = document.getElementById("searchButton");
    const results = document.getElementById("results");

    function normalize(text) {
        return String(text)
            .toLowerCase()
            .replace(/[״"']/g, "")
            .replace(/\s+/g, " ")
            .trim();
    }

    function searchMessages() {
        const query = normalize(input.value);

        if (!query) {
            results.innerHTML = "";
            return;
        }

        const words = query.split(" ").filter(Boolean);

        const found = messages.filter(message => {
            const searchable = normalize(
                message.id + " " + message.text
            );

            // כל מילה שהמשתמש כתב חייבת להופיע,
            // אך היא יכולה להופיע בכל מקום בתוך ההודעה.
            return words.every(word => searchable.includes(word));
        });

        renderResults(found);
    }

    function renderResults(found) {
        if (!found.length) {
            results.innerHTML = `
                <div class="empty">
                    לא נמצאו הודעות התואמות לחיפוש
                </div>
            `;
            return;
        }

        results.innerHTML = `
            <div class="result-count">
                נמצאו ${found.length.toLocaleString("he-IL")} תוצאות
            </div>
            ${found.map(message => `
                <article class="result">
                    <div class="result-id">${escapeHtml(message.id)}</div>
                    <div class="result-text">${highlight(message.text)}</div>
                </article>
            `).join("")}
        `;
    }

    function highlight(text) {
        const query = normalize(input.value);
        if (!query) return escapeHtml(text);

        let safe = escapeHtml(text);

        query.split(" ")
            .filter(Boolean)
            .sort((a, b) => b.length - a.length)
            .forEach(word => {
                const escapedWord = escapeRegExp(escapeHtml(word));
                safe = safe.replace(
                    new RegExp(`(${escapedWord})`, "gi"),
                    "<mark>$1</mark>"
                );
            });

        return safe;
    }

    function escapeHtml(text) {
        return String(text)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function escapeRegExp(text) {
        return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    }

    async function loadMessages() {
        results.innerHTML = `<div class="loading">טוען את מאגר ההודעות...</div>`;

        try {
            const response = await fetch("messages.json", {
                cache: "no-cache"
            });

            if (!response.ok) {
                throw new Error("Failed to load messages.json");
            }

            messages = await response.json();

            results.innerHTML = "";
        } catch (error) {
            results.innerHTML = `
                <div class="empty">
                    לא ניתן לטעון את מאגר ההודעות.
                    <br>
                    ודא שהקובץ <b>messages.json</b> נמצא באותה תיקייה עם הדף.
                </div>
            `;
        }
    }

    button.addEventListener("click", searchMessages);

    input.addEventListener("keydown", event => {
        if (event.key === "Enter") {
            searchMessages();
        }
    });

    input.addEventListener("input", () => {
        if (!input.value.trim()) {
            results.innerHTML = "";
        }
    });

    loadMessages();
</script>

</body>
</html>

messages.json
יש לשים את שני הקבצים באותה תיקייה

חזקי ראזנבערג

@יהודה-צ.-כ. יש שגיאה בקישור הראשון

איל משולש

@יהודה-צ.-כ. לא ניתן להעלות כאלו קבצים לפורום, שים בדרייב ותפרסם
אבל לא הבנתי מה כ"כ לחפש בקונטרול F ברישמת הודעות מערכת

יהודה צ. כ.

@איל-משולש @חזקי-ראזנבערג
עודכן.
@איל-משולש קשה לחפש לפי מספר ההודעה או מילים בודדות.

חזקי ראזנבערג

@יהודה-צ.-כ. מה עודכן ??

הדיבל המעופף

@חזקי-ראזנבערג
הוא שם קוד שאותו תשמור כקובץ

חזקי ראזנבערג

@הדיבל-המעופף שמרתי כקובץ אבל זה לא מביא תוצאות בחיפושים

הדיבל המעופף

@חזקי-ראזנבערג
שמת את messages.json באותה תיקייה?

איל משולש

@יהודה-צ.-כ. כתב:

@איל-משולש @חזקי-ראזנבערג
עודכן.
@איל-משולש קשה לחפש לפי מספר ההודעה או מילים בודדות.

מה כ"כ קשה, מה ההבדל שם באיזה צורה הוא מחפש שזה יותר טוב?