مربع بحث مخصص

مقدمة
اللغات المستعملة في هذا المثال: (HTML,CSS,JavaScript)

الفكرة
إنشاء مربع بحث مخصص نوعا ما،يقوم بجلب البيانات من مصفوفة "array" محددة مسبقا.
المصفوفة ستكون بإذن الله عبارة عن قائمة متداخلة "nested"بها عدد من الأعضاء(على سبيل المثال)، و كل عنصر منها الذي هو عبارة عن كائن "object"،سيضم عضو.​

كود PHP:

/** مصفوفة متداخلة
 * سيكون كل عنصر من عناصر المصفوفة كائنًا
 * (property and value) مما يعني أن كل عنصر من عناصر المصفوفة سيكون له خاصية وقيمة
 */
const users = [
    { name: 'محمد' }, { name: 'أحمد' }, { name: 'مهند' }, { name: 'مربم' },
    { name: 'أميرة'}, { name: 'مراد' }, { name: 'فوزي' }, { name: 'فاروق' },
    { name: 'سهام' }, { name: 'سمير' }, { name: 'سلطان' }, { name: 'شكري' },
    { name: 'منيرة'}, { name: 'شراز' }, { name: 'شيماء' }, { name: 'سندس' },
    { name: 'حليمة' }, { name: 'رضاء' }, { name: 'صبري' }, { name: 'سوسن' },
    { name: 'حوريه' }, { name: 'حيدر' }, { name: 'ريم' }, { name: 'فاطمة' },
    { name: 'لطيفة' }, { name: 'حكيم' }, { name: 'رضوان' }, { name: 'لطفي' },
    { name: 'أروى' }, { name: 'ليلى' }, { name: 'صابرين' },
]

كيفية عمل المحرك
ستكون عملية البحث عن طريق إسم العضو.
يقوم المستخدم بإدخال إسم العضو المراد البحث عنه. و من ثم، يتم البحث في المصفوفة عن أي حرف متطابق مع كلمة البحث.
إن وجدت نتيجة، يتم عرضها عل الشاشة داخل عنصر "HTML li" الذي يتم إنشائه في صورة وجود نتيجة.
و إن كان العكس.(لا توجد نتيجة) أيضا ينم إنشاء عنصر "HTML li" لعرض رسالة إعلام بالحدث.

كود الجفا سكريبت كاملا​

كود PHP:

'use strict';
/** مصفوفة متداخلة
 * سيكون كل عنصر من عناصر المصفوفة كائنًا
 * (property and value) مما يعني أن كل عنصر من عناصر المصفوفة سيكون له خاصية وقيمة
 */
const users = [
    { name: 'محمد' }, { name: 'أحمد' }, { name: 'مهند' }, { name: 'مربم' },
    { name: 'أميرة'}, { name: 'مراد' }, { name: 'فوزي' }, { name: 'فاروق' },
    { name: 'سهام' }, { name: 'سمير' }, { name: 'سلطان' }, { name: 'شكري' },
    { name: 'منيرة'}, { name: 'شراز' }, { name: 'شيماء' }, { name: 'سندس' },
    { name: 'حليمة' }, { name: 'رضاء' }, { name: 'صبري' }, { name: 'سوسن' },
    { name: 'حوريه' }, { name: 'حيدر' }, { name: 'ريم' }, { name: 'فاطمة' },
    { name: 'لطيفة' }, { name: 'حكيم' }, { name: 'رضوان' }, { name: 'لطفي' },
    { name: 'أروى' }, { name: 'ليلى' }, { name: 'صابرين' },
]

// أين سيتم عرض النتيجة HTML عنصر الـ
const results_container = document.querySelector('.results-container')

// المعني بالبحث HTML عنصر الـ
const searchInput = document.querySelector('#search')
// ربط أو إضافة حدث بالعنصر الذي أعلناه
searchInput.addEventListener('input', (e) => {
    // تعريف وتعيين قيمة هدف الحدث إلى متغير ، بغض النظر عما يتم كتابته في شريط البحث
    let value = e.target.value

    // التحقق مما إذا كان الإدخال موجودًا وإذا كان أكبر من 0
    if (value && value.trim().length > 0) {
        // إعادة تعريف "القيمة" لاستبعاد المسافات البيضاء وتغيير الإدخال إلى أحرف صغيرة
        value = value.trim().toLowerCase()
        
        // إرجاع النتائج فقط إذا تم تضمين قيمة البحث في اسم المستخدم
        setList(users.filter(user => {
            return user.name.includes(value)
        }))
    } else {
        // الإدخال غير صالح. عرض رسالة خطأ
        // أو لا تظهر أي نتائج
        clearList()
      results_container.classList.remove('active')
    }

})

// "clear" حدث النقر لزر المسح
document.getElementById('clear').addEventListener('click', (e) => {
    e.preventDefault()
    clearList()
    results_container.classList.remove('active')
    searchInput.value = ''
    searchInput.focus()
})

/**
 * إضافة النتائج إلى صفحة الويب
 *
 * @param {*} results
 */
function setList(results) {
    clearList()
    for (const user of results) {
        // لكل عنصر في النتيجة HTML li إنشاء عنصر
        const resultItem = document.createElement('li')

        // إضافة فئة لكل عنصر نتيجة
        resultItem.classList.add('result-item')
        
        // إضافة إسم المستخدم المنحصل عليه كنص إلى قائمة
        const text = document.createTextNode(user.name)

        // المستخدم المنحصل عليه كنص إلى النتيجة
        resultItem.appendChild(text)
            
        // إصاهة عنصر النتيجة إلى القائمة
        list.appendChild(resultItem)
        
        // إضافة فئة إلى عنصر عرض النتيجة
        results_container.classList.add('active')
        
        // إضافة أو ربط حدث النقر لكل عنصر في النتائج
        resultItem.addEventListener('click', () => {
            let txt = resultItem['innerHTML' in resultItem ?
                'innerHTML' : (resultItem['innerText' in resultItem ?
                'innerText' : 'textContent'])];
            // "searchInput" أضف قيمة العنصر الذي تم النقر فوقه إلى الإدخال
            searchInput.value = txt
            clearList()
            results_container.classList.remove('active')
        })
    }
    if (results.length === 0) {
        createError()
    }
}
/**
 * راجع كل طفل في قائمة نتائج البحث وقم بحذفه
 */
function clearList() {
    while (list.firstChild) {
        list.removeChild(list.firstChild)
    }
}
/**
 * عرض رسالة إذا لم يتم العثور على نتائج
 */
function createError() {
    //("li" عنصر قائمة) إنشاء عنصر للخطأ
    const error = document.createElement('li')
    // أضف اسم الفئة إلى عنصر الخطأ
    error.classList.add('error-message')
    // إنشاء نص لعنصرنا
    const text = document.createTextNode('عذرا ، لا توجد نتائج لاستعلام البحث')
    // أضف النص إلى عنصرنا
    error.appendChild(text)
    // أضف الخطأ إلى عنصر قائمتنا
    list.appendChild(error)
}


صفحة الـ "HTML"كاملة مع جميع الأكواد​

كود HTML:

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>مربع بحث مخصص</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            font-family: sans-serif;
        }
        body {
            height: 100vh;
            background: linear-gradient(#500270, #5c0281);
        }
        .container {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 2px;
        }
        .form-container {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
        }
        .container .form {
            width: 100%;
            padding: 7px;
        }
        .container .form>form {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .container .form>form input {
            width: 50%;
            display: table-cell;
            vertical-align: middle;
            padding: 7px;
            margin: 0 2px;
            font-size: medium;
            color: #141414;
            border: 1px solid #f5f5f5;
            outline: none;
            box-shadow: none;
        }
        .container .form>form input::placeholder {
            font-size: smaller;
        }
        @media (min-width: 768px) and (max-width: 1199.98px) {
            button {
                display: inline-block;
                margin: 4px 1px;
                padding: 5px 10px;
                font-size: 16px;
                background-color: #a804ea;
                border-color: transparent;
                border-radius: 4px;
                color: white;
                text-align: center;
                cursor: pointer;
            }
        }
        .results-container {
            width: 80%;
            margin: 0 auto;
            padding: 2px;
            background-color: transparent;
            color: transparent;
            border: none;
            opacity: 0;
        }
        .results-container.active {
            color: #a804ea;
            -webkit-animation: fadein 0.5s;
            animation: fadein 0.5s;
            opacity: 1;
        }

        @media (max-width: 767.98px) {
            .container .form>form input {
                width: 100%;
            }

            button {
                float: left;
                margin: 4px 2px;
                padding: 6px 7px;
                font-size: 14px;
                background-color: #a804ea;
                border-color: transparent;
                border-radius: 4px;
                color: white;
                text-align: center;
                cursor: pointer;
            }

            .results-container,
            .error-message {
                margin-top: 20px;
            }
        }
        @-webkit-keyframes fadein {
            from {
                color: transparent;
                opacity: 0;
            }

            to {
                color: #a804ea;
                opacity: 1;
            }
        }
        @keyframes fadein {
            from {
                color: transparent;
                opacity: 0;
            }

            to {
                color: #a804ea;
                opacity: 1;
            }
        }
        @keyframes slidein {
            from {
                color: transparent;
                opacity: 0;
                transform: translateY(100%);
            }

            to {
                color: cornflowerblue;
                opacity: 1;
                transform: translateY(0%);
            }
        }
        @-webkit-keyframes slidein {
            from {
                transform: translateY(100%);
            }

            to {
                transform: translateY(0%);
            }
        }
        .results-list {
            width: 100%;
            list-style: none;
            list-style-type: none;
        }
        .result-item {
            width: 100%;
            padding: 3px 3px;
            margin: 3px auto;
            background-color: #f5f5f5;
            color: #a804ea;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1.5px;
            border: 1px solid #440373;
            border-radius: 4px;
            cursor: copy;
        }
        .error-message{
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            background-color: #f5f5f5;
            color: #bc0141;
            text-align: center;
            border: 1px solid #f5f5f5;
        }
        
        /****************
        * Placeholder    *
        *****************/
        /* Chrome <=56, Safari < 10 */
        ::-webkit-input-placeholder {opacity: 1; -webkit-transition: opacity .5s;
            transition: opacity .5s;}
        /* FF 4-18 */
        :-moz-placeholder {opacity: 1; -moz-transition: opacity .5s;
            transition: opacity .5s;}
        /* FF 19-51 */
        ::-moz-placeholder {opacity: 1; -moz-transition: opacity .5s;
            transition: opacity .5s;}
        /* IE 10+ */
        :-ms-input-placeholder {opacity: 1; -ms-transition: opacity .5s;
            transition: opacity .5s;}
            
        /* Modern Browsers */
        ::placeholder {opacity: 1; transition: opacity .5s;}
        /* Chrome <=56, Safari < 10 */
        *:focus::-webkit-input-placeholder { opacity: 0; }
        /* FF 4-18 */
        *:focus:-moz-placeholder { opacity: 0; }
        /* FF 19-50 */
        *:focus::-moz-placeholder { opacity: 0; }
        /* IE 10+ */
        *:focus:-ms-input-placeholder { opacity: 0; }
        *:focus::placeholder { opacity: 0; }
    </style>

</head>

<body>
    <div class="container">

        <div class="form-container">
            <div class="form">
                <form>
                    <input type="search" id="search" class="search-input" placeholder="إبـحـث عـن عـضـو" autocomplete="off">
                    <button type="button">بـحـث</button>
                    <button type="button" class="clear-results" id="clear">مـحـو</button>
                </form>
            </div>
        </div>

        <div class="results-container">
            <ul id="list" class="results-list">

            </ul>
        </div>

    </div>

    <script src="search.js"></script>
</body>

</html>

مثال على وجود بيانات


مثال رسالة الخطأ


مــتــابــعــة طــيــبــة
​