Blogger JSON Search

by Tushar Thakare

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="/search" id="ajax-search-form">
    <input type="text" name="q">
    <input type="submit" value="Search">
</form>

CSS

* {margin:0;padding:0}
body {
  padding:50px 50px;
}
#ajax-search-form {
  position:relative;
  font:normal normal 13px Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  background-color:white;
  font:normal normal 12px/100% Arial,Sans-Serif;
  color:black;
  margin:0 0;
  padding:5px 5px;
  border-top-color:#999;
  width:180px;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border:none;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {
  background-color:#083E5F;
}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result * {
  margin:0 0 0 0;
  padding:0 0 0 0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}

JavaScript

(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted...
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'https://vioec.blogspot.com/feeds/posts/default/?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        var mark = new RegExp(keyword, "ig");
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t.replace(mark, "<span style=\'background-color:pink;text-decoration:underline;\'>" + keyword + "</span>") + '</a></li>';
                    }
                    skeleton += '</ol>';
            ...