#resLive.active{opacity:1;height:200px;}
#resLive{opacity:0;height:0;background:rgb(21 32 43);color:white;border-radius:4px;height:0;overflow-y:scroll;position:relative;transition:opacity .3s ease-out;position:absolute;top:46px;width:100%;}
#resLive .infoLoading{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:800;font-size:21px;}
#resLive div a {display: flex;align-items: center;gap: 12px;font-size: 18px;}
#resLive div img {width: 64px;height: 64px;object-fit: cover;border-radius: 50%;}
#resLive div.Item {margin: 12px 0;padding:12px;}
#resLive div.Item:hover{background:rgb(13 23 33);}
#resLive div.Item:nth-child(1){margin:0;}
#resLive div.Item:nth-last-child(1):not(#demo div.Item:nth-child(1)) {margin: 12px 0 0;}

liveSearch

<div id="resLive"></div>

$('.liveSearch').each(function(){
const uri = 'https://streaming-anime-indo.blogspot.com',
arr = [],
get = '';
let res = 0;
$(this).on('click input',function(){
if(res == 0){
$.ajax({
    type:"GET",
    url: uri + '/feeds/posts/default',
    data:{alt:"json","max-results":0},
    dataType:"jsonp",
    success:function(e){
        let l=e.feed.openSearch$totalResults.$t,
        c = l%150==0?l/150-1:Math.floor(l/150);
                if(l>res){
          $('#resLive').addClass('active');
          $('#resLive').html('<div class="infoLoading">Getting Data (<span>0.0%</span>)</div>');
        for(let o=0;o<=c;o++){
        $.ajax({
    		type:"GET",
   			 url:uri + '/feeds/posts/default',
    		 data:{alt:"json","start-index":150*o+1,"max-results":150},
   			 dataType:"jsonp",
    		 success:function(e){
 		for(let i=0;i<e.feed.entry.length+1;i++){
        if(l>res){
        const obj = {},feed = e.feed.entry[i];
        obj['title'] = feed.title.$t;
        const content = feed.content != null ? feed.content.$t : feed.summary.$t,
        d=content.indexOf("<img"),
		o=content.indexOf('src="',d) > -1 ? content.indexOf('src="',d) : content.indexOf("src='",d),
		f=content.indexOf('"',o+5) > -1 ? content.indexOf('"',o+5) : content.indexOf("'",o+5),
		g=content.substr(e+5,f-e-5),
		imgs=-1!=d&&-1!=o&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp";
        obj['img'] = feed.media$thumbnail != null ? feed.media$thumbnail.url.replace(/s72-c/,'s500') : imgs;
        for(let x=0;x<feed.link.length;x++){
        obj['url'] = feed.link[x].href;
        }
        arr.push(obj);
        res++;
        $('#resLive .infoLoading span').html(((res/l)*100).toFixed(1) + '%');
        }else{
               $('#resLive').html('<div class="infoLoading">Waiting You Type...</div>');}
        }
        }})
        }
         }else{
                 if($('#resLive div').length == 0){
       $('#resLive').html('<div class="infoLoading">Waiting You Type...</div>');
       }
         }
        }})
}
});
$(this).keyup(function(){
let query = $(this).val(),
get = '';
if(query != ''){
 $('#resLive').addClass('active');
for(let e=0;e<arr.length;e++){
	if(arr[e].title.toUpperCase().search(query.toUpperCase()) > -1){
    get += '<div class="Item"><a href="'+arr[e].url+'">'
    	+ '<img loading="lazy" alt="'+arr[e].title+'" src="'+arr[e].img+'">'
    	+ '<span>'+arr[e].title+'</span>'
        +'</a></div>';
    }
}
if(get.length != 0){
$('#resLive').html(get);
}else{
$('#resLive').html('<div class="infoLoading">No Result...</div>');
}
}else{
       $('#resLive').removeClass('active');
       $('#resLive').html('');
}
});
});

const uri = location.protocol + '//' + location.hostname,