التعامل مع زر المسح (X) في حقول الإدخال: دليل شامل لـ JavaScript و jQuery

مقدمة: قوة jQuery وضرورة Vanilla JavaScript

لطالما سهّل jQuery عملية تطوير المشاريع على الويب بفضل واجهته البسيطة وميزاته القوية. ورغم تراجع شعبيته في السنوات الأخيرة لصالح أطر عمل أخرى، إلا أن فهم أساسياته لا يزال ذا قيمة، خاصة عند الحاجة إلى الوصول السريع إلى وظائفه المتقدمة. ومع ذلك، فإن jQuery، رغم قوته، لا يستطيع تغطية كل السيناريوهات. هنا تبرز أهمية الفهم المتين لـ Vanilla JavaScript (جافاسكريبت الخام)، الذي يملأ الفجوات ويقدم حلولاً للمشكلات التي قد لا تدعمها المكتبات الجاهزة بشكل مباشر.

في هذا المقال، سنتناول تحديًا شائعًا يواجهه المطورون عند التعامل مع حقول الإدخال من نوع البحث (type="search")، وهو كيفية استهداف والتعامل مع زر المسح التلقائي (X) الذي يظهر في هذه الحقول، لضمان تجربة مستخدم متكاملة وسلسة.

إعداد مشروعك الأولي: مثال عارض ويكيبيديا

لنفترض أن لديك مشروعًا بسيطًا لعرض مقالات ويكيبيديا، يتضمن حقل بحث وزرًا للبحث وزرًا آخر لمقالات عشوائية. الهيكل الأساسي لـ HTML قد يبدو كالتالي:

<div class="search">
  <p id="text">Search on Wikipedia</p>
  <input id="searchbox" type="search"></input>
  <button id="searchbutton">Search</button>
  <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
    <button id="searchbutton">Random Article</button>
  </a>
  <div class="resultingarticles"></div>
</div>

وظيفة البحث الأولية باستخدام jQuery

الآن، لنقم بإضافة بعض وظائف البحث الأساسية باستخدام jQuery. هذا الجزء من الكود سيتيح للمستخدمين إدخال نص في حقل البحث، والضغط على Enter أو زر Search، ثم عرض قائمة بالمقالات ذات الصلة من ويكيبيديا.

$( "#searchbox" ).keyup( function ( event ) {
  if (event.keyCode === 13 ) {
    $( "#searchbutton" ).click();
  };
});

$( "#searchbutton" ).click( function ( ) {
  var searchInput = document .getElementById( "searchbox" ).value;
  searchInput = searchInput.toLowerCase();
  if (searchInput !== "" ) {
    var myRequest = new XMLHttpRequest();
    myRequest.open( 'GET' , 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' + searchInput + '&utf8=&format=json&origin=*' );
    myRequest.onload = function ( ) {
      var searchResults = JSON .parse(myRequest.responseText);
      $( ".resultingarticles" ).empty();
      for (i= 0 ; i< 10 ; i++) {
        var articleTitle = searchResults.query.search[i].title;
        var articleSnippet = searchResults.query.search[i].snippet;
        var articleId = searchResults.query.search[i].pageid;
        var articleLink = "https://en.wikipedia.org/?curid=" + articleId;
        $( ".resultingarticles" ).append( "<a href='" + articleLink + "' target='_blank'>" +
                                        "<div class='article'>" +
                                        "<p>" +articleTitle+ "</p>" +
                                        "<p>" + articleSnippet + "</p>" +
                                        "</div>" +
                                        "</a>" );
      };
    };
    myRequest.send();
  };
});

حتى هذه النقطة، كل شيء يعمل كما هو متوقع: يمكنك إدخال نص في مربع البحث، والضغط على Enter أو زر Search، وسترى قائمة بمقالات ويكيبيديا ذات الصلة. هذا هو السلوك الأساسي الذي نرغب فيه.

تحدي زر المسح (X) التلقائي في حقول الإدخال

عند استخدام السمة type="search" لعنصر <input> الخاص بك، فإن متصفحات مثل Chrome تقوم تلقائيًا بإضافة زر مسح صغير على شكل حرف X إلى نهاية حقل الإدخال بمجرد وجود نص فيه وعند تحريك مؤشر الفأرة فوق الحقل. هذا الزر يسهل على المستخدم مسح محتوى الحقل بسرعة. تجدر الإشارة إلى أن المتصفحات الأخرى قد تتعامل مع type="search" بشكل مختلف، وقد لا تعرض هذا الزر بنفس الطريقة.

عند النقر على زر X، يختفي النص من حقل الإدخال، وهذا هو سلوكه الافتراضي. ولكن ماذا لو كان لديك بالفعل قائمة من المقالات المعروضة، وعند مسح النص من حقل البحث، كنت ترغب أيضًا في مسح المقالات المعروضة؟ في هذه الحالة، ستلاحظ أن مجرد مسح حقل الإدخال لا يؤدي إلى مسح النتائج، مما يترك تجربة المستخدم غير مكتملة:

حل المشكلة باستخدام Vanilla JavaScript

يتضح أن النقر على زر X في مربع البحث يؤدي إلى إطلاق حدث خاص يسمى "search". المشكلة هنا هي أن مكتبة jQuery لا تدعم هذا الحدث بشكل مباشر، مما يعني أننا لا نستطيع ببساطة استخدام $( "#searchbox" ).on( "search", ... ). لحل هذه المشكلة، سيتعين علينا كتابة مستمع حدث (event listener) باستخدام Vanilla JavaScript:

document .getElementById( "searchbox" ).addEventListener( "search" , function ( event ) {
  $( ".resultingarticles" ).empty();
});

باستخدام هذه الطريقة، عندما يتم إطلاق حدث "search" (أي عند النقر على زر X أو الضغط على Enter في حقل البحث)، يمكننا استخدام jQuery لمسح محتويات عنصر <div> الذي يحتوي على المقالات المعروضة. هذا يضمن أن واجهة المستخدم تتفاعل بشكل صحيح مع إجراء المستخدم، مما يوفر تجربة متكاملة:

الخلاصة التقنية

يُبرز هذا المثال العملي أهمية الفهم العميق لكل من مكتبات JavaScript الشائعة مثل jQuery و Vanilla JavaScript. فبينما توفر jQuery تسريعًا كبيرًا في التطوير، فإن هناك سيناريوهات معينة، مثل التعامل مع الأحداث الخاصة بالمتصفح (كحدث "search")، تتطلب العودة إلى أساسيات JavaScript. يضمن هذا النهج الهجين أن المطورين يمكنهم بناء تطبيقات ويب قوية ومرنة تستجيب بشكل كامل لتفاعلات المستخدم، مما يعزز من جودة تجربة المستخدم ويجعل الواجهة أكثر سهولة وبديهية.