How to Add a Simple Plain HTML Search with Autocomplete in WordPress

Integrate plain HTML search form and override WordPress get_search_form function.



Let me show how to create a form with plain HTML and then override the existing WordPress get_search_form() function and give you a couple of ideas on autocomplete.

How to Add Plain HTML Search in WordPress

The Form

I have coded a quick demo of how to create the plain HTML search form without the use of any JavaScript. To do this all we need to do is add input of type search and link it with a datalist HTML element.

Note: Styling a datalist with CSS is tricky but it’s not impossible.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

Get Search Form

Now that we have a sample of our plain HTML search form let me show you how to integrate it and override the WordPress function that is responsible to generate and output a search form.

Now it comes to the tricky part how-to load the datalist options with terms from your database post and page content.

  1. You can generate a list with 100 most searched terms and put them into a JSON file. Then create the datalist options based on this list. You can use Google Analytics or create a method (use plugin) to filter and list the most common words from your content. And finally, run a corn job update this list weekly (or daily if you blog very active and you publish one or more articles each day).
  2. The second option would be to create an autocomplete function, however, for this, you would need to add a JavaScript event listener on key-down for the input search. And then add a couple of ajax functions to select and load the terms from your database.
  3. Only if you already have jQueryUI within your project loaded I would recommend using their autocomplete feature.

What’s Next?

You have seen from this tutorial that you don’t need to use a plugin to create a fancy and easy WordPress search form with autocomplete. And for sure you would need a very minimal usage of JavaScript to get it working.

If it were up to me, I would combine options #1 and #2 to generate the datalist options. If you want to know how to do that, please comment below, and if I get more than several requests, I will write a second post of this tutorial where I will show you how to add an autocomplete functionality to your plain HTML search form.

‘Til the next one.

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

Integrate Bitly Short URLs Within WordPress

How to use Bitly to generate short URLs and track your social media clicks.

READ MORE...

Track your WordPress.org Plugin Stats on Your Site

How to track your WordPress.org plugins statistics and display them as a widget within your own theme.

READ MORE...

How to Use WP-CLI and Create WordPress Child Themes

Quickly and easily generate and initialize child themes using WP-CLI.

READ MORE...

Leave a Reply

Your email address will not be published. Required fields are marked *

Create a Complete WordPress Blogger Card Plugin Using Web Components
Easy Custom User Role Feature Without a WordPress Plugin

Thank you for reading our content. Use the buttons below to spread the love and share How to Use WP-CLI and Create WordPress Child Themes with your followers.