$(function (){
    var media_list = []
    for (var i = document.querySelectorAll('#frame-sheild .media-list li').length - 1; i >= 0; i--) {
        media_list.push({
            value: document.querySelectorAll('#frame-sheild .media-list li')[i].getElementsByTagName('input')[0].getAttribute('value'),
            sourceid: document.querySelectorAll('#frame-sheild .media-list li')[i].getAttribute('data-id')
        })
    }
  $('#search-frame').on('keyup', function (){
    var keyWords = $(this).val()
    var mediaList = ''

    for(var i = 0; i < media_list.length; i++){
      if (media_list[i].value.indexOf(keyWords) !== -1) {
        mediaList += '<li data-id="'+media_list[i].sourceid+'"><input class="btn btn-default media-item" title="'+ media_list[i].value +'" type="button" value="' + media_list[i].value + '"></li>'
        $('#frame-sheild .media-list').html(mediaList)
      }
    }
  })
})

