مشكلة في تنفيذ عملية البحث عن منتجات في مصفوفة باستخدام جافاسكريبت

المشكلة هي أنك قمت بتحديد دالة باسم searchdata وهي خاصة بعملية البحث، لكنها غير موجودة في ملف script.js هل قمت بحذفها؟

علي أي حال استخدم الدالة التالية للبحث وتحديث الجدول بناءًا على البحث:

function searchProducts() {
  let searchTerm = document.getElementById('search').value.toLowerCase();
  let searchResults = [];

  if (searchmood === 'اسم المنتج') {
    searchResults = dataPro.filter(product => product.title.toLowerCase().includes(searchTerm));
  } else {
    searchResults = dataPro.filter(product => product.category.toLowerCase().includes(searchTerm));
  }

  console.log(searchResults);

  let table = '';
  for (let i = 0; i < searchResults.length; i++) {
    table += `<tr class="trclass">
        <td>${i + 1}</td>
        <td class="tdclass">${searchResults[i].title}</td>
        <td class="tdclass">${searchResults[i].price}</td>
        <td class="tdclass">${searchResults[i].taxes}</td>
        <td class="tdclass">${searchResults[i].ads}</td>
        <td class="tdclass" id="sump"> - ${searchResults[i].discount}</td>
        <td class="tdclass" id="sumpaq">${searchResults[i].total}</td>
        <td class="tdclass">${searchResults[i].category}</td>
      <td><button id="update" onclick="updateData(${i})" >تعديل <i class="fa-solid fa-pen fa-2xs"></i></button></td>
      <td><button id="delete" onclick="deleteData(${i})" >حذف <i class="fa-solid fa-trash-can fa-3xs"></i></button></td>
    </tr>`;
  }
  document.getElementById('tbody').innerHTML = table;
}

لكن عليك تعديل قيمة السطر التالي وحذف المسافة فعند استخدام === أو == يجب أن يكون النص متطابق لذلك نحذف المسافات لكي لا تسبب مشكلة:

let searchmood = 'اسم المنتج';

بدلاً من 

let searchmood = 'اسم المنتج ';

أيضًا استخدم الدالة في ملف index.html كالتالي:

<input type="text" id="search" onkeyup="searchProducts()" placeholder="البحث" />

بتاريخ 1 ساعة قال Mustafa Suleiman:

المشكلة هي أنك قمت بتحديد دالة باسم searchdata وهي خاصة بعملية البحث، لكنها غير موجودة في ملف script.js هل قمت بحذفها؟

علي أي حال استخدم الدالة التالية للبحث وتحديث الجدول بناءًا على البحث:

function searchProducts() {
  let searchTerm = document.getElementById('search').value.toLowerCase();
  let searchResults = [];

  if (searchmood === 'اسم المنتج') {
    searchResults = dataPro.filter(product => product.title.toLowerCase().includes(searchTerm));
  } else {
    searchResults = dataPro.filter(product => product.category.toLowerCase().includes(searchTerm));
  }

  console.log(searchResults);

  let table = '';
  for (let i = 0; i < searchResults.length; i++) {
    table += `<tr class="trclass">
        <td>${i + 1}</td>
        <td class="tdclass">${searchResults[i].title}</td>
        <td class="tdclass">${searchResults[i].price}</td>
        <td class="tdclass">${searchResults[i].taxes}</td>
        <td class="tdclass">${searchResults[i].ads}</td>
        <td class="tdclass" id="sump"> - ${searchResults[i].discount}</td>
        <td class="tdclass" id="sumpaq">${searchResults[i].total}</td>
        <td class="tdclass">${searchResults[i].category}</td>
      <td><button id="update" onclick="updateData(${i})" >تعديل <i class="fa-solid fa-pen fa-2xs"></i></button></td>
      <td><button id="delete" onclick="deleteData(${i})" >حذف <i class="fa-solid fa-trash-can fa-3xs"></i></button></td>
    </tr>`;
  }
  document.getElementById('tbody').innerHTML = table;
}

لكن عليك تعديل قيمة السطر التالي وحذف المسافة فعند استخدام === أو == يجب أن يكون النص متطابق لذلك نحذف المسافات لكي لا تسبب مشكلة:

let searchmood = 'اسم المنتج';

بدلاً من 

let searchmood = 'اسم المنتج ';

أيضًا استخدم الدالة في ملف index.html كالتالي:

<input type="text" id="search" onkeyup="searchProducts()" placeholder="البحث" />

 

شكرا ممكن تشرح لي الطريقه

 دالة searchProducts تقوم بقراءة القيمة المدخلة في حقل البحث ثم البحث عن المنتجات المتطابقة بناءًا على اسم المنتج أو تصنيف المنتج، ثم  بتحديث الجدول لعرض نتائج البحث المطابقة من خلال المصفوفة في متغير searchResults والناتجة عن الميثود filter.

عند تغيير وضع البحث بين "اسم المنتج" و "تصنيف المنتج" بناءًا على قيمة searchmood، يتم تغيير وضع البحث ونص العنصر المرشح للبحث في الواجهة.

بتاريخ 4 دقائق مضت قال Mustafa Suleiman:

 دالة searchProducts تقوم بقراءة القيمة المدخلة في حقل البحث ثم البحث عن المنتجات المتطابقة بناءًا على اسم المنتج أو تصنيف المنتج، ثم  بتحديث الجدول لعرض نتائج البحث المطابقة.

عند تغيير وضع البحث بين "اسم المنتج" و "تصنيف المنتج" بناءًا على قيمة searchmood، يتم تغيير وضع البحث ونص العنصر المرشح للبحث في الواجهة.

هل من الممكن ان تجيب على رسالتى اخى الفاضل الكريم

لو سمحت