<form action='javascript:searchBlog();' style='width: 100%;' class="ui icon form"> <div style='width: 100%;' class="ui big fluid floating compact message"> <div id='labelDropdown' class="ui loading selection dropdown"> <label>Filter Label: </label> <input id='inputLabelDropdown' type="hidden" name="gender"> <i class="dropdown icon"></i> <div class="default text">Categories</div> <div id='labelItems' class="menu"> </div> </div> <input id='input_query' type='text' type="text" name="first-name" placeholder="Search from the website" /> <br /> <button id='searchBtn' class='ui compact inverted right floated red button' type='submit'><i class='search icon'></i> Search</button> </div> </form> <div style='min-height: 100px;' id='outputSearch' class='ui fluid attached inverted message'> </div> <script type='module'> window.addEventListener('load', async () => { // Blogger Functions in getting a post.. await initFunctions(['jQuery', '$().dropdown()', 'moment']); $('#labelDropdown').dropdown(); const outputDiv = document.getElementById('blogger_search_result'); const bloggerAPIKey = `&key=AIzaSyBs4OQldZVO9UhVDg08xmBvyhiwsYGjtFY`; const bloggerID = `4996019336227331994`; const bloggerAPIurl = `https://www.googleapis.com/blogger/v3/blogs/${bloggerID}/posts/search?q=`; const feedsUrl = `https://storehaccounts.blogspot.com/feeds/posts/default/?alt=json&q=`; window.searchBlog = queryDataBlog; await getLabels(); async function getLabels() { let data = await fetch('https://storehaccounts.blogspot.com/feeds/posts/default/?alt=json'); data = await data.json(); data = data.feed.category; let label_arr = []; data.forEach(items => { label_arr.push(items.term); }); label_arr.sort() for (const items of label_arr) { document.getElementById('labelItems').innerHTML += `<div class="item" data-value="${items}">${items}</div>` } document.getElementById('labelDropdown').classList.remove('loading'); } async function queryDataBlog() { document.getElementById('outputSearch').innerText = ''; document.getElementById('searchBtn').classList.add('loading'); const query = document.getElementById('input_query').value; const label = document.getElementById('inputLabelDropdown').value; let addQueryLabel = ``; if (label) addQueryLabel = `label:"${encodeURI(label)}"`; let data = await fetch(`${feedsUrl}${query.length == 0 ? `` : `"${encodeURI(query)}"&`}${!addQueryLabel ? `` : `${addQueryLabel}&`}max-results=40`); console.log(`${feedsUrl}${query.length == 0 ? `` : `"${encodeURI(query)}"&`}${!addQueryLabel ? `` : `${addQueryLabel}&`}max-results=40`); if (!data) { document.getElementById('searchBtn').classList.remove('loading'); return }; // console.log(`Querying: ${feedsUrl}${query.length == 0 ? ``: `${encodeURI(query)}&`}${!addQueryLabel ? ``: `${encodeURI(addQueryLabel)}&`}max-results=40`); data = await data.json(); if (!data.feed.entry) { document.getElementById('searchBtn').classList.remove('loading'); return; } for (const items of data.feed.entry) { let html_string = ``; html_string += `<div class='ui inverted compact floating attached segment'> <img class="ui bordered mini image" src='${items.hasOwnProperty('media$thumbnail') ? `${items.media$thumbnail.url}` : `https://cdn-icons-png.flaticon.com/512/5486/5486152.png`}'/> <div class='ui label'>${items.title.$t}</div>`; for (const label of items.category) { html_string += `<div class="ui inverted blue basic label"> ${label.term} </div>`; } document.getElementById('outputSearch').innerHTML += html_string; } document.getElementById('searchBtn').classList.remove('loading'); } async function fetchData() { document.getElementById('outputSearch').innerText = ''; document.getElementById('searchBtn').classList.add('loading'); const query = document.getElementById('input_query').value; if (!query) return; let data = await fetch(`${bloggerAPIurl}${query}${bloggerAPIKey}`); if (!data) return; data = await data.json(); for (const items of data.items) { document.getElementById('outputSearch').innerText += JSON.stringify(items); } document.getElementById('searchBtn').classList.remove('loading'); } }, false); </script>