sleekr-new.js

var leaveTypes = ['Cuti tahunan', 'Cuti sakit', 'Remote', 'Cuti tidak berbayar', 'Maternity Leave']
$('#see-more-list').append('<input style="border:1px solid gray; margin:10px" id="slksearch" type="text" placeholder="Search by name" />')
$('#see-more-list').append('<select id="slktype"><option>All</option>'+ leaveTypes.map(l => '<option>'+l+'</option>').join('')+'</select>')
$('#see-more-list').append('<span style="margin: 5px" id="slktotal"></span>')

$("#slksearch").on('input', () => {
   var val = $('#slksearch').val()
   handleOnChange(val, $('#slktype').val())
})

$('#slktype').on('change', () => {
   var val = $('#slktype').val()
   handleOnChange($('#slksearch').val(), val)
})

$('a.fc-more').on('click', () => {
   $('#slktotal').text('')
})

function handleOnChange(val, type) {
  var total = 0
  $('#see-more-list ul li').each(function () {
    var txt = $(this).find('div.left-side span:nth-of-type(2) span:first-child').text()
    var typeSpan = $(this).find('div.left-side span:nth-of-type(2) span:nth-child(2)').text()
    var toggle = txt.toLowerCase().indexOf(val.toLowerCase()) !== -1 && (typeSpan === type || type === 'All')
    total += toggle ? 1 : 0
    $(this).toggle(toggle)
  })
  $('#slktotal').text(total + ' people')
}