{"id":41450,"date":"2022-11-21T15:00:31","date_gmt":"2022-11-21T14:00:31","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=41450"},"modified":"2023-01-09T11:50:15","modified_gmt":"2023-01-09T10:50:15","slug":"how-to-add-autocomplete-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-autocomplete-wordpress\/","title":{"rendered":"How to Add Autocomplete Search in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]When using a search engine like Google, there is a high possibility that you will be offered some search suggestions before you\u2019re even done with entering an entire search query. This is called an autocomplete search, a great feature that can quickly help users find what they\u2019re looking for and save them much valuable time in the process<\/strong>. In turn, this can only contribute to their overall user experience and make it more likely that they will stay on your website for longer.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now, WordPress does come with the ability to add a search functionality by default, and, depending on the theme you\u2019re using, you may even be able to insert it into many different areas of your site and add a search bar to your WordPress menu<\/a>, for example. However, when it comes to features such as WordPress search autocomplete, you need to use a WordPress search plugin<\/a> that specifically offers the autocomplete function.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This time around, we will show you how to easily implement this practical feature into your WordPress site and make the searching process much more convenient for your visitors<\/strong>. Without further ado, here goes.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding Autocomplete Search in WordPress With a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]As we\u2019ve already mentioned in the beginning, to add the autocomplete search function to your WordPress site, you do need to install a plugin<\/a> that supports this feature. One such plugin is Ajax Search Lite<\/a> \u2013 it\u2019s a freemium plugin that you can use to add a live search bar to your site<\/strong>. Aside from having access to Google\u2019s autocomplete feature, you will also be able to add your search box to any page, post, or custom post type, use custom filter boxes (checkbox filters) for categories and post types, and more.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Ajax <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There is also the pro version<\/a> of the plugin (available at the price of $36) that comes with some additional advanced options. These include the ability to search in the category, tag, and date filters, search in comments, have access to 4 different layouts and over 100 different themes, etc.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Installing the Plugin and Setting Up the Autocomplete Options<\/h3>\n

[\/vc_column_text][vc_column_text]After installing the plugin and activating it, go to Ajax Search Lite<\/em><\/strong> (available in your admin dashboard) and find the General Options<\/em> tab<\/strong>. Then, navigate to Autocomplete & Suggestions<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once there, you will see that the Autocomplete search option is switched on by default<\/strong>. The same goes for the Google search keyword suggestions option.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Turn <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There are a few other options you can set here, like the maximum keyword length, maximum keywords count, and the language of Google suggestions.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Make sure to hit the \u201cSave options!\u201d button once you\u2019re done.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In case you want to determine which types of content will show up in your autocomplete results, make sure to visit the Sources & Basics tab. You will be able to choose anything from navigation menus to custom CSS and templates. Moreover, you will get to do all this using the help of a neat drag & drop feature.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Sources <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In addition, you can set the plugin to allow (or not allow) search in title, permalinks, post excerpts, custom fields, and so on.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are many other useful settings available, such as Image Options that you can use to decide whether you want to include images in search results, Layout Options (to fully customize the look of your search box and its results), Advanced Options, and more.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For more info on all these options and to learn how to use this practical plugin in more detail, we suggest that you check out our article on how to add AJAX live search in WordPress<\/a>.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding the Autocomplete Search Box to Your WordPress Site<\/h3>\n

[\/vc_column_text][vc_column_text]Once you adjust all the settings according to your preferences, it\u2019s time to add your Ajax autocomplete search to your site.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To do this, you first have to copy the \u201cSearch shortcode\u201d<\/strong> (available right above the plugin\u2019s options).[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Search <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you copy this shortcode, you should head to the page\/post you want to add your search to.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Then, find the shortcode block using the (+) or \u201cAdd block\u201d button.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Simply paste your shortcode into the block<\/strong>, and you\u2019re all set.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Make sure to Publish\/Update<\/em> your page\/post<\/strong>, and then go ahead and see what your autocomplete search looks like live.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This is what our autocomplete search bar looked like once we started typing in our keyword.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Autocomplete <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Autocomplete Search – Best Practices<\/h2>\n

[\/vc_column_text][vc_column_text]Last but not least, it might be a good idea to also mention some of the best practices you should consider when implementing autocomplete search into your site<\/strong>. Here are some of the ways in which you can make your autocomplete search look more visually compelling and user-friendly as a whole.[\/vc_column_text][vc_empty_space height=”22px”]

    \n
  • \n\t
    \n Add borders or shadows.<\/strong> Applying this strategy can help users who perform searches on your website stay focused on the search at hand and not get distracted by any other elements. All you need to do is add some sort of border or shadow between the autocomplete search box and the rest of the content to make a better distinction. You may even want to cast a shadow over the entirety of your site (except for the search box itself) to let users focus better.<\/span> <\/div>\n <\/li>\n<\/ul>
      \n
    • \n\t
      \n Limit the number of autocomplete suggestions.<\/strong> While it may seem like a good idea to show tons of suggestions, this isn\u2019t necessarily the most user-friendly approach. To keep users from becoming overwhelmed, try limiting the number of suggestions to around 10 on desktop, and no more than 6-8 on mobile.<\/span> <\/div>\n <\/li>\n<\/ul>
        \n
      • \n\t
        \n Accentuate the predictive part of suggestions.<\/strong> Generally speaking, there are two main components in each autocomplete suggestion \u2013 the part the users typed in (i.e. \u201cdresses\u201d), and the suggested part that has a goal of making their search complete (i.e. dresses \u201cfor wedding\u201d, dresses \u201cfor prom\u201d, etc.). To help users recognize the suggestions faster and pinpoint whether they match what they need, it might not be a bad idea to emphasize these suggested parts in some way. For example, you can put them in bold or italics (or both).<\/span> <\/div>\n <\/li>\n<\/ul>
          \n
        • \n\t
          \n Keep things simple.<\/strong> Even though it is completely fine (and even recommended) to distinguish your autocomplete search for the rest of your website design, you shouldn\u2019t go overboard when it comes to adding the elements themselves. After all, the main goal of your search is to help users find what they need quickly and with ease. So, it\u2019s always better to keep things simple and minimalistic than to overcrowd your search with too many design elements (like unnecessary icons, paddings, images, etc.).<\/span> <\/div>\n <\/li>\n<\/ul>[vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

          In Conclusion<\/h2>\n

          [\/vc_column_text][vc_column_text]The autocomplete search feature can greatly contribute to the overall user-friendliness of your site as it lets users find what they need quickly and effortlessly. With the help of the right plugin, adding autocomplete search in WordPress is as easy as it can get. We suggest using a plugin like AJAX Live Search for this task as it comes with a wide range of autocomplete and other live search options and allows you in-depth customization of the look and function of your search. Plus, the autocomplete option is already available with the free version of this plugin, so you won\u2019t have to pay any money to add this practical option to your WordPress site.
          \n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

          Learn how you can easily implement autocomplete search into your WordPress website and help greatly enhance the searching experience of your visitors. <\/p>\n","protected":false},"author":2,"featured_media":41482,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,36,13],"class_list":["post-41450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-ux","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/41450","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=41450"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/41450\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/41482"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=41450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=41450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=41450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}