How to Add Live Search to Blogger Website by Ajax and What is it's Advantage ?

Hello,

So, Today we will see HOW TO ADD LIVE SEARCH TO BLOGGER WEBSITE for free by just using JavaScript and CSS.

Before starting the post I would like to explain what is live search and what are its advantages.

So let's get started.

Live Search Introduction:

The default site search provided by Blogger themes is not much effective in searching contents for your blog or web. Its always good to have a good search box so that your visitors can have much better exposure to article's. 

Similar to Google Custom search for websites, Live Search also has a custom search for blogs and website. The difference for Live Search is that you need not go navigate from an existing page to search for contents.

So you might be thinking that it will decrease the page view that we get on our website through /search and this is true but imagine that if you are website has live search and the users get the post view before clicking on it then experience may enhance the user to interact more with our website and that's why we all are interested in compact and good UI designs.

Advantages of Live Search in Blogger:

1. All the website admins think that using external JS will decrease their page speed but we have lazy loaded the live search JavaScript so that your website loads faster but yeah it can impact a bit in loading.
2. Live search users can easily navigate through the content of your website and they can fastly search for the content through just the search bar.
3. Live search can help to make better UI design for your website.
4. You can easily customise the CSS part so that the life search is perfect with your website.

Codes for Live Search Widget in Blogger:

This tutorial applies only to templates that already have a searchbox, and I think all templates of course already have a searchbox, unless you create your own template, it is recommended to create a searchbox first.

CSS for Live Search Box:

Go to blogger.com > Themes > edit HTML > CTRL+F >Paste CSS above ]]></b:skin> or </style>

CSS for Live Search :

/* ajax search */
.asearch .hidden{display:none}
.asearch {padding:20px 10px;background:rgba(255,255,255,.89);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;box-shadow:0 15px 10px -10px rgba(155,155,155,0.15),0 -15px 10px -10px rgba(155,155,155,0.15);max-height:450px;margin:20px auto;border-radius:8px;animation:fadeInDown .5s linear}
.asearch-results-empty{text-align:center}
.asearch h3 {color:#000;font-size:14px;font-weight:500;margin:0 10px 20px 10px;text-align:left}
.asearch-results{text-align:left}
.asearch li {background:#fff;position:relative;display:inline-block;width:100%;padding:10px;margin:5px 5px 5px -15px;border-radius:5px;border:1px solid rgba(155,155,155,0.15);overflow:hidden;transition:all .3s}
.asearch li:hover {border-color:#f89000}
.asearch li h4 {font-size:13px;font-weight:500;margin:0 15px 0 0}
.asearch li h4 a {color:#000;transition:all .3s}
.asearch li h4 mark {background-color:transparent;color:#f89000;text-decoration:underline;transition:all .3s}
.asearch li h4 a:hover,.asearch li h4:hover mark {color:#f89000}
.asearch-image {float:left;margin:0 10px 0 0}
.asearch-image img {border-radius:5px}
.asearch-pager a {display:inline-block;clear:both;overflow:hidden;background:#f89000;color:#fff;font-size:13px;padding:7px 15px;border-radius:5px;margin:15px 3px 0 3px}
.asearch-pager {overflow:hidden;clear:both;position:relative}.asearch li:nth-child(odd) {animation:bounceInLeft 1.5s}
.asearch li:nth-child(even) {animation:bounceInRight 1.5s}

/* animation */
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}

/* css darkmode for drK class*/
.drK .asearch {background:#1e1e1e;color:rgba(255,255,255,.85)}
.drK .asearch li h4 a {color:#fff}
.drK .asearch li h4 a:hover {color:#fff;text-decoration:underline}
.drK .asearch-pager a {background:#294db4;color:#fff;border:0}
.drK .asearch-pager a:hover {background:#1c2733;color:#fff}
.drK .asearch li {background:#1c1c1c;border:0;box-shadow:none}
.drK .asearch li:hover {background:#1e1e1e}
.drK .asearch h3 {color:#fff}

JavaScript for Live Search:

Below JavaScript should be pasted above </body> or it maybe like this &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/
// live search script lazyload
var liveSearchLazy=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===liveSearchLazy||0!=document.body.scrollTop&&!1===liveSearchLazy)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/crangsten/live-search@main/main.js?live=true&amp;image=true&amp;url=https://www.anandnawal.com";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),liveSearchLazy=!0)},!0); function srcClr(){document.querySelector(".asearch").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".asearch").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);
/*]]>*/</script>

The Live Search will come to action only after user scrolls down as we have lazy-loaded it.

FAQ ( FREQUENTLY ASKED QUESTIONS):

Question: How does Live Search Works in blogger?

Answer: When users are typing, the live search shows suggestions on how to complete the keyword. It might be enough to enter one character for the box to auto-complete. 

Question: Why is it called Live Search bar?

Answer: One of the most convenient ways to search for specific data is the AJAX search box. It is also called live search because it reacts to the users’ input in runtime. They instantaneously gets result.

Question: Why choose Live Search over traditional Search Box?

Answer: A lot of users prefer live searches to traditional ones because of its speed and useful suggestions. It will provide users fast search.

Conclusion:

In the I would like to conclude that the live search option will make your website and bit slow but it will help users to interact better with your website and your UI will become good also.

So that's all about LIVE SEARCH AJAX WIDGET ADDITON to any blogger template.

Hope you have not faced any problems.

If there is any problem then comment below.

Thanks

www.AnandNawal.com

Thanks to:

dte.web.id and some other GitHub repository for providing basic fetch script and base for the development of this code.

Go to Link