JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>  

<input type="text" id="filter_def" />

<ul>
  <li>Coffée</li>
  <li>Tea</li>
  <li>Milk</li>
    <li>poo</li>
    <li>malone</li>
</ul>

JavaScript

//var cant = $("ul li").size();

var todos = [];

   $("ul li").each(function(index) {
       todos.push($(this).text());
    });

//console.log(todos) //ok

$("#filter_def").keyup(function(){
    //console.log($(this).val());
    
    $("ul").html("");
   var srtSearch = $(this).val(); 
   //var filtrados = filtrar(todos, srtSearch);
   
    //var filtrados = _.filter(todos, function(txt){ return /+'srtSearch '+/gi.test(txt); });
    
    var filtrados = _.filter(todos, function(txt){ return (new RegExp(srtSearch,'gi')).test(txt); });
    
    
    for(var i=0;i<filtrados.length;i++){
        $('ul').append('<li>'+filtrados[i]+'</li>');
    }

});

/*
var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });

console.log(evens)
    */
/*
function filtrar(){
    $(this).text().indexOf(srtSearch) > 0)
        
}
    */

    /*
       $("ul li").each(function(index) {
      //$(this).find("li:eq(1)").css( "fontStyle", "italic" );
        //console.log(index)
        //console.log($(this).text())
       
//       if($(this).text().indexOf(srtSearch) > 0) $(this).show();
  //          else $(this).hide();
       
    });
        */
    
    //console.log()
  
  //$("ul li:eq(1)")    
//$("ul li").css("color","red")    
    
    /*
$("ul li").each(function(index) {
  //$(this).find("li:eq(1)").css( "fontStyle", "italic" );
    //console.log(index)
    console.log($(this).text())
    if($(this).text().indexOf("m") < 0)
        $(this).hide();
});
*/