<paper-header-panel>
<paper-toolbar style="background:white; color:black;"> <paper-icon-button icon="arrow-back" onclick="toggleSearch()"></paper-icon-button> <paper-input no-label-float label="Type to search" oninput="searchPosts()" style="width:100%;" id="searchinput"> </paper-input> <paper-icon-button icon="close" onclick="clearSearchInput()"></paper-icon-button> </paper-toolbar>
<div>
<iron-list id="searchresults"> </iron-list>
</div> <script>
var posts; function searchPosts(){ var searchkeyword = document.getElementById('searchinput').value; results = new Array; if(posts==undefined){ fetch('{{ site.baseurl }}/search.json') .then(function(response) { response.json().then((json)=>{ posts=json; filterResults(searchkeyword); }); }) }else{ filterResults(searchkeyword); } } function filterResults(keyword){ var results = document.getElementById('searchresults'); results.innerHTML = ""; if(keyword==""||keyword==undefined){ return; } for(var i=0; i<posts.length; i++){ console.log(keyword); console.log(typeof(keyword)); console.log(posts[i]); if(posts[i].title.includes(keyword) || posts[i].tags.includes(keyword) || posts[i].url.includes(keyword) || posts[i].date.includes(keyword)){ results.innerHTML += `<paper-item onclick="location.href='${posts[i].url}'">${posts[i].date} | ${posts[i].title}</paper-item>`; } } } function clearSearchInput(){ document.getElementById('searchinput').value = ""; }
</script> </paper-header-panel>