{"id":32342,"date":"2021-12-04T15:00:56","date_gmt":"2021-12-04T14:00:56","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=32342"},"modified":"2023-05-25T13:04:37","modified_gmt":"2023-05-25T11:04:37","slug":"live-ajax-search-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/live-ajax-search-in-wordpress\/","title":{"rendered":"What is Live Ajax Search and How to Add It to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Visitors should never get lost on your website. Getting from any page or post or product to another should be intuitive and easy. <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-website-navigation\/\">Planning and optimizing navigation<\/a> can help with anything from <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-bounce-rate-in-wordpress\/\">reducing your website\u2019s bounce rates<\/a>, to <a href=\"https:\/\/qodeinteractive.com\/magazine\/tips-to-boost-sales-using-smart-wordpress-navigation\/\">increasing your sales<\/a>. And creating good menus aren\u2019t the only things you should do to improve your website navigation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Search is an incredibly important component of your website navigability. The bigger your website, the more crucial search becomes, and since WordPress\u2019 native search isn\u2019t that exciting, people are adding all kinds of things such as <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-google-search-to-wordpress\/\">Google search<\/a> or <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-search-to-menu-wordpress\/\">custom search bar<\/a>. In addition to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-customize-wordpress-search-results-page\/\">customizing your search results page<\/a>, adding Ajax live search is another way to improve user experience and website navigation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-live-ajax-search\">What Is Live Ajax Search?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-add-live-ajax-search-to-your-website\">Why Add Live Ajax Search to Your Website?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-live-ajax-search-to-wordpress\">How to Add Live Ajax Search to WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-live-ajax-search\"><\/a>What Is Live Ajax Search?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"560\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/What-is-Ajax.jpg\" class=\"attachment-full size-full\" alt=\"What is Ajax\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/What-is-Ajax.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/What-is-Ajax-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/What-is-Ajax-768x444.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/What-is-Ajax-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Live Ajax search or Ajax live search, is a term that\u2019s composed of two parts \u2013 \u201cAjax\u201d and \u201clive search.\u201d<strong> \u201cLive search,\u201d in this context, is the type of search that shows results to you as you\u2019re typing your query.<\/strong> If you\u2019ve ever searched for anything on Google, you\u2019ve probably seen what a live search looks like \u2013 it gives you suggestions for possible searches. <strong>On your website, it might be better to have a live search that shows results that fit the search criteria.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Ajax, or AJAX, is the acronym for Asynchronous JavaScript and XML. Ajax isn\u2019t a programming language or an application, it\u2019s more like a way of doing things when creating things for the web.<\/strong> When web pages use Ajax, you can update content on them without actually reloading the page. Content, in this context, can include the contents of the search results box. <strong>Thanks to Ajax, the results can be shown and updated in real-time, without having to reload the page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-add-live-ajax-search-to-your-website\"><\/a>Why Add Live Ajax Search to Your Website?<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>WordPress already has search functionality you can find in the block editor and add to a page or a post on your website.<\/strong> You can also add it to a widget if you want. Wherever you place it, however, you\u2019ll get the same, slightly underwhelming, search experience.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Test-Post.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Test Post\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Test-Post.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Test-Post-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Test-Post-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Test-Post-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>When you use Ajax to add live search to your website, you\u2019re making the search experience more interactive.<\/strong> Because the results are shown as users are typing their queries, they may have a broader view of the contents of the website, without actually having to browse it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>It goes the other way around, too \u2013 with live search, users can look for very specific terms and see how their search narrows as they include more keywords.<\/strong> Live search allows the user to navigate the search experience in the way they see fit \u2013 to get a broader view or a narrower one. On top of that, it\u2019s just more fun than the regular search.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-live-ajax-search-to-wordpress\"><\/a>How to Add Live Ajax Search to WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]When it comes to adding functionalities and features to a WordPress website, plugins are often the hassle-free solution that\u2019s the most appealing to people who don\u2019t want to write code. <strong>We\u2019ll use a plugin to show you how you can add a live Ajax search to your website.<\/strong> <a href=\"https:\/\/wordpress.org\/plugins\/ajax-search-lite\/\" target=\"_blank\" rel=\"noopener\">Ajax Search Lite<\/a> is the plugin we\u2019ll use \u2013 it\u2019s a freemium plugin whose free version will work just fine to show you what Ajax live search adds to your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Install-Ajax-Search-Lite-Plugin.jpg\" class=\"attachment-full size-full\" alt=\"Install Ajax Search Lite Plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Install-Ajax-Search-Lite-Plugin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Install-Ajax-Search-Lite-Plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Install-Ajax-Search-Lite-Plugin-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Install-Ajax-Search-Lite-Plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first step to using the plugin would be to find and install it. From your website\u2019s dashboard, head over to <em><strong>Plugins &gt; Add New<\/strong><\/em>, and search for \u201cAjax search lite.\u201d <strong>The plugin is likely to be the first result of the search \u2013 simply click the \u201cInstall Now\u201d button, followed by \u201cActivate,\u201d and get ready to dive into the plugin\u2019s options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting Up Ajax Search Lite<\/h3>\n<p>[\/vc_column_text][vc_column_text]You\u2019ll find the plugin\u2019s option under <em><strong>Ajax Search Lite &gt; Ajax Search Lite<\/strong><\/em>. The first set of options are the General Options, which themselves are divided into several categories. <strong>The first, Sources &amp; Basics, is where you choose whether you want to try and replace the theme\u2019s search with Ajax Search Lite<\/strong>. It might not work with every theme, and don\u2019t worry if it doesn\u2019t \u2013 we\u2019ll show you how to add the search without the replacement. In these options, you\u2019ll also set where you want the plugin to look for results.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"638\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Options.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Options-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Options-768x506.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Options-620x408.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The remaining tabs in the General Options, Behavior, Ordering, and Autocomplete and Suggestions, will let you <strong>pick whether you want the search to show exact matches only, what types of behaviors trigger results, the order in which you want the results to appear, and whether you want to turn to autocomplete and suggestions on.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-General-Options.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite General Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-General-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-General-Options-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-General-Options-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-General-Options-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Image Options let you select whether you want the search results to include an image. <strong>You\u2019ll be able to pick the source of the image, as well as alternative sources, and the size and display mode of the image.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Image-Options.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Image Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Image-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Image-Options-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Image-Options-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Image-Options-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The Frontend Options let you decide whether to show search settings on the frontend and select which ones you want to appear.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Frontend-Options.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Frontend Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Frontend-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Frontend-Options-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Frontend-Options-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Frontend-Options-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Layout Options have everything you need to customize how the search box and the results appear. <strong>You\u2019ll have a pick between a couple of themes for the search box, with further customization options for it, the results, and the settings, also available.<\/strong> You\u2019ll also be able to adjust the layout of the results, as well as their behavior, and whether you want to highlight keywords or not. There\u2019ll be an option to add custom CSS, too.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"519\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Layout-Options.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Layout Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Layout-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Layout-Options-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Layout-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Layout-Options-620x332.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Finally, the Advanced Options will let you choose advanced options regarding the result contents and the field. You will also be able to set some exclusion and exception rules.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"584\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Advanced-Options.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Advanced Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Advanced-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Advanced-Options-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Advanced-Options-768x463.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Advanced-Options-620x374.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you\u2019ve set everything up to your liking, you can go ahead and add the Ajax live search box to your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding Live Search to Your Website<\/h3>\n<p>[\/vc_column_text][vc_column_text]The plugin gives you three options to add Ajax live search to your website. It can replace the theme\u2019s search, you can add it using shortcode, and add it to a widget. <strong>Since the first method doesn\u2019t always work, we\u2019ll show you how to add the search using the latter two.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you navigate to the Ajax Search Lite options, <strong>you\u2019ll notice a small bar that contains the search shortcode.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Search-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Search Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Search-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Search-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Search-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Search-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Simply copy the shortcode, find a page or a post where you\u2019d like to include it and paste the shortcode into a shortcode block.<\/strong> That\u2019s all you have to do.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Results.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Results\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Results.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Results-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Results-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Results-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add live search as a widget, navigate to <em><strong>Appearance &gt; Widgets<\/strong><\/em>.<strong> Search for Ajax Search Lite in the widgets and add it to the area where you want to display it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Result.jpg\" class=\"attachment-full size-full\" alt=\"Ajax Search Lite Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Result-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Result-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Ajax-Search-Lite-Result-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That\u2019s all there is to it \u2013 this method lets you display search on all the pages and posts that display the area where you\u2019ve added the widget.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Ajax lives search can be a great addition to your website. It\u2019s a better, more interactive way to let people find what they need, and it might save them some time, too. Best of all is that you can set it up and use it without any fuss \u2013 it\u2019s as easy as installing a plugin and fine-tuning its options.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Thinking about using Ajax live search to make your WordPress website&#8217;s search more interactive? That&#8217;s a great idea, and we&#8217;ll show you how to do it!<\/p>\n","protected":false},"author":9295,"featured_media":32365,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[178,82,4,13],"class_list":["post-32342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-ajax","tag-search","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=32342"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32342\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/32365"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=32342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=32342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=32342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}