استكمال وظيفة البحث في صفحة HTML

لقد كنت أعمل مؤخرًا على إطار عمل تم تعديله من قبل العديد من الأشخاص، وأشعر بالدوار عندما أنظر إلى الكود كل يوم، ومع ذلك، أشعر أنني قد أحرزت تقدمًا كبيرًا في إنشاء واجهة خلفية وواجهة أمامية قابلة للتكوين نطاقات البيانات المختلفة للمكتبتين جيدة جدًا، لقد أخرجتها لمشاركتها في ذلك اليوم. اليوم سأتحدث عن الوظيفة التي كنت أعمل عليها في الأيام القليلة الماضية، وهي وظيفة البحث صفحات HTML.

تُستخدم هذه الوظيفة بشكل أساسي لإدخال الأحرف في مربع البحث، ثم الضغط على الزرين السابق والتالي لوضع علامة على الأحرف المطابقة في منطقة الاستعلام تلقائيًا بنمط خاص، وبعد ذلك، يمكنك الاستمرار في الضغط على الزرين السابق والتالٍ تصفح بالترتيب وقم بمطابقة الأحرف واستخدم نمطًا آخر لتمييز الحرف المطابق حاليًا عن الأحرف المطابقة الأخرى.

من المحتمل أن تبدو شاشة الواجهة الأمامية كما يلي:

HTML هو مثل هذا:

 <div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> ابحث عن: <input id=key type=text style=width: 200px placeholder=keyword/> <a href= javascript :void(0); class=prev onclick='wordSearch(1)'><i class=c-icon></i></a> <a href=javascript:void(0); class=next onclick='wordSearch()'><i class=c-icon></i></a> </div> </div>

رمز البرنامج النصي:

 <script>// وظيفة البحث var oldKey0 = ; var Index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; // احصل على قيمة المفتاح if (!key) { return; // الخروج إذا كان المفتاح فارغًا} getArray(); focusNext(flg); (newflag == 0) {// إذا كان هناك بحث جديد، فسيتم مسح الفهرس Index0 = 0; } if (!flg) { if (oldCount0 != 0) {// إذا كان لا يزال هناك بحث if (index0) < oldCount0) {// إذا لم تكن قد انتهيت من المشي على اليسار، فانتقل إلى اليسار focusMove(index0); } else if (index0 == oldCount0) {// لقد انتهيت من المشي Index0 = 0; ); if (index0 <= oldCount0 && Index0 > 0) if (index0 <= oldCount0 && Index0 > 0) {// إذا لم تكن قد انتهيت من المشي على اليسار، فانتقل إلى اليسار Index0--; focusMove(index0); } else if (index0 == 0) {// لقد انتهيت من المشي Index0 = oldCount0--focusMove(index0); } } } } function getArray() { newflag = 1; / احصل على قيمة المفتاح if (!key) { oldKey0 = ; // الخروج إذا كان المفتاح فارغًا} if (oldKey0 != key || $(.current).length != currentLength) { // إعادة تعيين مؤشر 0 = 0؛ var Index = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); } ) ; pos0 = new Array(); if ($(.contrast-wrap).hasClass(current)) { currentLength = $(.current).length; .contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='result + (index++) + ' class= 'result'> + key + </span>)); // استبدال } } else { $(.contrast-wrap).addClass('current'); $(.current).length; $(.contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id= 'result + (index++) + ' class='result'> + key + </span>)); // استبدال }); //$(#key).val(key0 = key; //$(.contrast .result).each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this) .offset().top); //); // pos0.push($(.contrast .result:eq(2)).offset().top - $(.contrast .result:eq(2)).parents(.contrast).offset().top); oldCount0 = $(.contrast .result).length; newflag = 0; } } function focusMove(index0) { $(.contrast .result:eq( +index0 + )).parents('.contrast-wrap').addClass('current'); $(.contrast .result:eq( + Index0 + )).addClass(res); var top = $(.contrast .result:eq( + Index0 + )).offset().top + $(.contrast .result :eq( + Index0 + )).parents(.contrast).scrollTop(); var intop = top - $(.contrast .result:eq( + Index0 + )).parents(.contrast).offset().top; $(.contrast .result:eq( + Index0 + )).parents(.contrast).animate({ التمريرTop: intop }, 200); إذا ($(.contrast .result:eq( +index0 + )).parents(.contrast).scrollTop() == 0) { $(html, body).animate({ التمريرTop: top - 200 }, 200 } else { $(html, body).animate({ التمرير العلوي: $(.contrast .result:eq( + Index0 + )).parents(.contrast).offset().top - 200 }, 200); } } $('#key').change(function () { if ($('#key').val() == ) { Index0 = 0; $(.contrast .result). every(function () { $(this).replaceWith($(this).html()); }); oldKey0 = ; </script>

أولاً، قم بمسح نتائج الاستعلام الأخير، ثم استخدم التعبيرات العادية لإضافة نمط خاص لجميع الأحرف المتطابقة في المنطقة بناءً على قيمة المفتاح، على سبيل المثال، تتم إضافة علامة امتداد مع اسم فئة النتيجة إلى الطريقة. استخدم المتغير odKey0 لتسجيل قيمة المفتاح (قارن أولاً عند الدخول في المرة القادمة. إذا كانت هي نفسها، فهذا يعني أنك بحاجة إلى إلقاء نظرة على المحتوى التالي أو السابق، لذلك لا تحتاج إلى استخدام مطابقة التعبير العادي عند الإدخال). يسجل oldCount0 العدد الإجمالي للاستعلامات ، ويتم تعيين العلامة الجديدة على 0 (إذا لم تكن هذه هي المرة الأولى) فإن العلامة الجديدة للاستعلام هي 1).

ثم أدخل طريقة getNext لتحديد ما إذا كان المستخدم قد ضغط على الزر السابق أو التالي. استخدم الفهرس0 لتسجيل الحرف المطابق الذي يتم عرضه حاليًا ومقارنته مع oldCount0 لتحديد ما إذا كان سيتم زيادته أو تقليله أو تعيينه على 0 (إذا كان أكبر من 0). oldCount0 أو أقل من 0، عليك أن تبدأ من جديد).

طريقة focusMove هي عملية تضع الصفحة على العنصر الحالي.

محدد eq(): يقوم المحدد بتحديد العناصر ذات قيمة فهرس محددة. على سبيل المثال: $(.contrast .result:eq(1)) يحدد العنصر الثاني المسمى result في العنصر الذي يكون اسم فئته هو Contrast.

طريقة Parents(): جميع العناصر الأصلية للعنصر. $(p).parents('.contrast-wrap') ، جميع العناصر المسماة التفاف التباين للعنصر p.

طريقة الاستبدال (): استبدل العنصر المحدد بمحتوى html المحدد. لاحظ أنه يتم أيضًا استبدال عناصر العنصر المحدد.

طريقة الإزاحة (): تقوم بإرجاع أو تعيين الإزاحة (الموضع) للعنصر المطابق بالنسبة للمستند.

طريقة التمرير () : إرجاع أو تعيين الموضع الرأسي لشريط التمرير للعنصر المطابق.

ما ورد أعلاه هو وظيفة البحث في صفحة HTML التي يقدمها لك المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!