AJAX Search Widget for Blogger

by Taufik Nurrohman

HTML

<form action="/search" method="get">
  <input name="q" type="text">
  <button type="submit">Search</button>
</form>
<script src="//dte-project.github.io/blogger/search.js?live=true&amp;id=%22298900102869691923%22&amp;e=myHookFn"></script>

JavaScript

var x = document.createElement('a');
x.innerHTML = '&times;';
x.href = "";
x.addEventListener("click", function(e) {
  var self = this.parentNode;
  self.parentNode.removeChild(self);
  e.preventDefault();
}, false);
x.style.cssText = 'position:absolute;top:.5em;right:.5em;text-decoration:none;line-height:1;';

function myHookFn(e, query, start, cached, container) {
  // Insert close button on search event
  e === "search" && container.appendChild(x);
}