How to Add Search Feature to Custom BloggerCMS Layouts

To add Search feature to your custom layout, create a search box and a button something like:

<input type="text" class="searchQuery" placeholder="Search Posts">
<button type="button" class="searchButton">Submit</button>

Now in your custom layout, copy search.js file from default/js folder to your custom layout folder and include it in your layout by placing this code in your layout footer file:

<script>
    var __blogURL = '{{settings.url}}';
</script>

<script src="{{settings.url}}/js/search.js"></script>

Note: Make sure to include jQuery before search.js file.

Open search.js file in some text editor and you will see it contains:

$(function () {

    ////////////// EDIT BELOW THREE VARS ///////////////
    // class/id/selector of search keyword textbox
    var $searchKeywordSelector = $('.searchQuery');
    // class/id/selector of search button
    var $searchButtonSelector = $('.searchButton');
    // class/id/selector for element where results will show
    var $searchResultsSelector = $('.main-content');
    ///////////////////////////////////////////////////

    // now search for blog posts
    $searchButtonSelector.click(function () {
        var foundPosts = '';
        var searchQuery = $.trim($searchKeywordSelector.val());
        var queryRegex = new RegExp(searchQuery, "ig");

        // don't search if nothing specified
        if (!searchQuery) {
            return false;
        }

        $.ajax({
            url: __blogURL + "/data/blog.json",
            type: "GET",
            dataType: "json",
            success: function (data) {
                $.each(data.posts, function (i, post) {
                    var postBody = $("<div/>").html(post.body).text();

                    if (post.title.search(queryRegex) != -1 || postBody.search(queryRegex) != -1) {
                        var slug = post.title.replace(/[^a-zA-Z0-9\/_|+ -]/, '');
                        slug = $.trim(slug).toLowerCase();
                        slug = slug.replace(/\s+/g,' ');
                        slug = slug.replace(/\W/g, ' ');
                        slug = slug.replace(/\s+/g, '-');

                        if (slug) {
                            foundPosts += '<h3><a href="' + data.settings.url + '/post/' + slug + '.html">' + post.title + '</a></h3><hr>';
                        }
                    }
                });

                if (foundPosts) {
                    $searchResultsSelector.html('').html(foundPosts);
                }
                else {
                    alert('No results found!');
                }
            },
            error: function (e) {
                console.log("error in searching...");
            }
        });
    });

    // on Enter keyboard button, click on search button
    $searchKeywordSelector.keydown(function (event) {
        if (event.keyCode == 13) {
            $searchButtonSelector.click();
        }
    });

});

Finally you need to edit these variables:

////////////// EDIT BELOW FOUR VARS ///////////////
// class/id/selector of search keyword textbox
var $searchKeywordSelector = $('.searchQuery');
// class/id/selector of search button
var $searchButtonSelector = $('.searchButton');
// class/id/selector for element where results will show
var $searchResultsSelector = $('.main-content');
///////////////////////////////////////////////////

• $searchKeywordSelector should match your search input/textbox selector
• $searchButtonSelector should match selector of search button
• $searchResultsSelector should match with element selector where you want to show search results

In above case, search textbox and button match these:

<input type="text" class="searchQuery" placeholder="Search Posts">
<button type="button" class="searchButton">Submit</button>

And for results element (.main-content), you could have for example:

<div class="main-content">Search results will be shown here</div>

Of course, you can give any class/id/attribute to your search input, button and results element but you should match them in above three variables.

For technical part of it, you would notice in order to search, we trigger an ajax request and get all contents of json file present in public/data/blog.json file, this file contains whole blog data. Then we iterate over each post and compare title and body of each post with search query and for found results, we create links with titles.

Therefore the public/data/blog.json file must be present in order for search to work. This file is automatically generated by BloggerCMS.