Widget:RecipeFilter

 <input id="recipeSearch" type="text"
        placeholder="Search recipes…"
        style="width:25%; margin-right:0.5em;" />
 <select id="levelFilter" style="margin-right:0.5em;">
   <option value="">All Levels</option>
   <option>Easy</option><option>Medium</option><option>Hard</option>
 </select>
 <select id="costFilter">
   <option value="">All Costs</option>
   <option>Low</option><option>Medium</option><option>High</option>
 </select>

• <a href="/wiki/IRIS_-_Internationalisation_through_Research_Activities"> IRIS – Internationalisation through Research Activities </a>

<script> (function(){

 function filter() {
   var q    = document.getElementById('recipeSearch').value.toLowerCase(),
       lvl  = document.getElementById('levelFilter').value,
       cost = document.getElementById('costFilter').value;
   document.querySelectorAll('#recipeList li').forEach(function(li){
     var text = li.textContent.toLowerCase(),
         okText = !q   || text.includes(q),
         okLvl  = !lvl || li.getAttribute('data-level') === lvl,
         okCost = !cost|| li.getAttribute('data-cost')  === cost;
     li.style.display = (okText && okLvl && okCost) ?  : 'none';
   });
 }
 ['input','change'].forEach(function(evt){
   document.getElementById('recipeSearch').addEventListener(evt, filter);
   document.getElementById('levelFilter').addEventListener(evt, filter);
   document.getElementById('costFilter' ).addEventListener(evt, filter);
 });

})(); </script>