Are you looking for a way to add a live search box on your website to enhance the performance of your website along with the functionality? Then you are in the right place because today I am going to show you how to add a live search box on your website.
What is a live search box on a website?
A live search box, also known as a live search bar or real-time search, is a feature commonly found on websites, particularly those with a large amount of content or products. It is a dynamic search field that allows users to enter keywords or phrases, and as they type, it instantly displays search results below the search box without requiring them to press an "Enter" or "Search" button.
Key characteristics of a live search box on a website include:
- Real-time results: As users type in their query, the search box continuously updates the displayed results in real-time. This can be helpful for quickly finding information or products as users refine their search.
- Auto-suggestions: Live search boxes often provide auto-suggestions or autocomplete suggestions based on the user's input. These suggestions can help users formulate their queries and find relevant results more easily.
- Interactive interface: Users can interact with the search results directly from the live search box, such as clicking on a result to view more details or navigating to a specific page.
- Filtering options: Some live search boxes offer filter options alongside the search results, allowing users to narrow down their search by category, type, date, or other relevant criteria.
- Improved user experience: Live search boxes enhance the user experience by providing instant feedback and reducing the need for page refreshes or navigating through multiple pages of search results.
- Mobile responsiveness: Live search boxes are often designed to work seamlessly on both desktop and mobile devices, making it easy for users to search and find content or products regardless of their device.
What are the Advantages of a live search on a website?
-
Improved User Experience:
- Live search provides instant feedback, reducing the need for users to wait for a separate search results page to load.
- Auto-suggestions help users formulate queries, making it easier for them to find what they're looking for.
-
Faster Navigation:
- Users can quickly access relevant content or products as they type, saving time and effort.
- Live search can reduce the number of clicks and page loads required to find information.
-
Increased Engagement:
- Live search encourages users to interact with the website's search functionality, keeping them engaged and on the site longer.
-
Higher User Satisfaction:
- By providing a responsive and efficient search experience, websites can enhance user satisfaction and encourage return visits.
-
Enhanced Discoverability:
- Users may discover content or products they weren't originally looking for due to auto-suggestions or real-time results.
-
Reduced Bounce Rates:
- Visitors are less likely to leave the website in frustration if they can quickly find what they need.
-
Conversion Rate Optimization (CRO):
- For e-commerce websites, live search can lead to higher conversion rates by facilitating product discovery and purchase.
-
Analytics and Insights:
- Live search can provide valuable data on user behavior and popular search terms, helping website owners understand user preferences and improve content or product offerings.
-
Mobile-Friendly:
- Live search is particularly beneficial on mobile devices, where screen real estate is limited, and users appreciate quick access to information.
-
Personalization:
- Some live search implementations can incorporate user preferences and past behavior to provide personalized recommendations.
-
Reduced Server Load:
- Live search often uses AJAX or similar technologies to fetch results without reloading the entire page, which can reduce server load and improve website performance.
-
Competitive Advantage:
- Implementing a live search feature can set a website apart from competitors by offering a more user-friendly experience.
-
Support for Large Content Libraries:
- Websites with extensive content libraries or product catalogs can benefit greatly from live search, as it helps users navigate through vast amounts of information more efficiently.
A live search feature on a website can enhance the overall user experience, drive user engagement, improve conversion rates, and provide valuable insights into user behavior. It is a valuable tool for websites looking to cater to user needs and make it easier for visitors to find what they're looking for.
How to create a live search box on the blogger website
Before we start creating a live search box, keep in mind that this tutorial will only work if the template you are using on your website already has a search box. Now follow the below steps to create the live search box on your website.
- Log in to your Blogger dashboard.
- Now go to Theme > Customize and click on Edit HTML.
- After that press
Ctrl + Fand search for]]></b:skin>code. - Now copy the below CSS code and paste this code above
]]></b:skin>or</style> - Again press Ctrl + F and search for
</body>. You should see a piece of code that looks like<!--</body>--></body> - The last step is to copy the following javascript code and paste it above
</body>or<!--</body>--></body> - Now click on the save icon and it's done!
/* ajax live search box*/ .ajax-search.hidden{display:none}.ajax-search{padding:20px 10px;background:rgba(255,255,255,.89)!important;-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!important;margin:20px auto;border-radius:8px;animation:fadeInDown .5s linear}.ajax-search-results-empty{text-align:center}.ajax-search h3{color:#000;font-size:14px;font-weight:500;margin:0 10px 20px 10px;text-align:left}.ajax-search-results{text-align:left}.ajax-search 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}.ajax-search li:hover{border-color:#f89000}.ajax-search li h4{font-size:13px;font-weight:500;margin:0 15px 0 0}.ajax-search li h4 a{color:#000;transition:all .3s}.ajax-search li h4 mark{background-color:transparent;color:#f89000;text-decoration:underline;transition:all .3s}.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f89000}.ajax-search-image{float:left;margin:0 10px 0 0}.ajax-search-image img{border-radius:5px}.ajax-search-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}.ajax-search-pager{overflow:hidden;clear:both;position:relative}.ajax-search li:nth-child(odd){animation:bounceInLeft 1.5s}.ajax-search 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)}}
/* darkmode css adjust the class ( .drK ) to make it work */ .drK .ajax-search{background:#1e1e1e!important;color:rgba(255,255,255,.85)}.drK .ajax-search li h4 a{color:#fff}.drK .ajax-search li h4 a:hover{color:#fff;text-decoration:underline}.drK .ajax-search-pager a{background:#294db4;color:#fff;border:0}.drK .ajax-search-pager a:hover{background:#1c2733;color:#fff}.drK .ajax-search li{background:#1c1c1c;border:0;box-shadow:none}.drK .ajax-search li:hover{background:#1e1e1e}.drK .ajax-search h3{color:#fff}
<script>/*<![CDATA[*/
// live search
function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&image=true&url=https://www.siteguide.xyz",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",liveSearchDefer,!1):window.attachEvent?window.attachEvent("onload",liveSearchDefer):window.onload=liveSearchDefer; function srcClr(){document.querySelector(".ajax-search").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);
/*]]>*/</script>
If you want to use lazyload for the javascript then use the below javascript code instead.
<script>/*<![CDATA[*/
// live search - 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/choipanwendy/ajaxS@main/live-search.js?live=true&image=true&url=https://www.siteguide.xyz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),liveSearchLazy=!0)},!0); function srcClr(){document.querySelector(".ajax-search").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);
/*]]>*/</script>
Warning!
The user must scroll in order to make this live search box workable. I will suggest you not to use it. But if you want your website to load faster then you can use this script. Make sure to change the URL to your own website URL.
Conclusion
Adding a live search box to a website is a user-focused decision that can significantly enhance the user experience, drive user engagement, improve conversion rates, and provide valuable insights into user behavior. It is a practical way to make your website more efficient and user-friendly, ultimately benefiting both visitors and website owners.
Post a Comment