<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();
}
});
This Pen doesn't use any external CSS resources.