<div>בדוגמה הבאה תוכלו להקליד מילים לחיפוש בשדה הטקסט,</div>
<div>לאחר לחיצה על "הצגת תוצאות" - הסטרינג שהוזן נבדק מול הרשימה,</div>
<div>ואז הרשמה מסתננת כך שיופיעו רק פריטים שמכילים את הסטרינג שבשדה החיפוש</div>
<input type="text" id="search" placeholder="הקלידו מילה לחיפוש" />
<button type="button" id="btn">הצג תוצאות</button>

<ul id="ul">
  <li>תשרי</li>
  <li>חשוון</li>
  <li>כסלו</li>
  <li>טבת</li>
  <li>אדר</li>
  <li>ניסן</li>
  <li>אייר</li>
  <li>סיוון</li>
  <li>תמוז</li>
  <li>אב</li>
  <li>אלול</li>
</ul>

<div id="results"></div>
body{
  direction: rtl;
  font-family: arial;
  font-size: 110%;
}
jQuery('#btn').on('click', function(){
  var val = jQuery('#search').val();
  if(val){
    // ריצה על האלמנטים רק אם אם השדה מלא.
    jQuery('#ul li').each(function(){
      if(jQuery(this).text().indexOf(val) >= 0)
        jQuery(this).show();
      else
        jQuery(this).hide();
    });
  }else{
    // אם השדה ריק - נציג את כל האפשרויות
    jQuery('#ul li').show();
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js