Create an autocomplete field in WordPress: 2019 Update

David Nash wordpress Leave a Comment

My most popular post is Create an autocomplete field in WordPress, but it’s been over three years since I wrote that. So I want to visit the topic again, and try to be a bit more thorough in my explanation.

So I’ve created a fresh install of WordPress 5.1 on my local machine. It has the Sample Page and Hello World! posts, and everything else that you get with a fresh WordPress install.

Previously I’d used jQuery, but we no longer need it. Browsers have come a long way, and ES5 pretty much covers everything.

This time, let’s use the Awesomplete javascript library. But first…

Let’s Create a Simple Theme!

Autocomplete can be kind of confusing. When I’m working on something I don’t quite understand yet, I like to keep everything as simple as possible. So let’s start with the simplest possible theme. It’s just a style.css and an index.php file. I create a directory in wp-content/themes called wp-autocomplete. I create the two files in that directory.

style.css look like this:

and index.php isn’t even a PHP file… yet!

Then I activate my new ultra minimal theme and visit the site. I see the message above which means that we are indeed ready to autocomplete. Almost.

If you’d like to download this very basic start, you can have a look at commit fe9f355 on github.

Our second baby step

The next smallest possible step we could take towards getting autocomplete functionality is to add get_header() and get_footer() to index.php.

Note: If you’re using get_header() and get_footer(), technically you should also have a header.php file and a footer.php file. If you don’t create those, WordPress will give you some good default functionality. See my “Oops” moment below.

Let’s also load the Awesomplete library. I want to keep everything simple, so I’m just using the minimum amount of files needed for it. That is, the unminified JS and CSS. See commit 232cd65.

Now that I’ve done that, and verified in the web developer console that the files are getting loaded without errors, it’s time to move onto the next step.

Extremely basic Awesomplete demo

Let’s just use the sample code from the documentation, so that our index.php file now looks like this:

Now let’s test it out…

Autocomplete basic demo

Success! We have autocomplete working! But this isn’t the final goal. This sample data is hard-coded. We want to pull those results from our WordPress database.

Basic WordPress autocomplete without AJAX

Continuing with our theme of keeping it simple, let’s just echo all the list items in PHP. This will be fine if there’s less than 1000 entries. That number’s pretty arbitrary, but keep in mind that the more entries you have, the longer your page is going to take to load. And that’s bad for the user experience and SEO.

Oops, I made a little mistake while writing this! (optional)

While working on this, I tried a few simple SQL queries. There were times I’d get no results when I was expecting them. By default, WP_DEBUG is set to false, so I wasn’t seeing the SQL errors.

So I added $wpdb->show_errors();, and then wanted to check that they would have been shown without that line if WP_DEBUG had been set to true. It was at this point that I realised that if you call get_header() and get_footer(), you should also have a header.php and footer.php, even if they’re just empty files. Without them, you’ll get something like the following:

Notice: Theme without header.php is deprecated since version 3.0.0 with no alternative available. Please include a header.php template in your theme. in /var/www/wp-autocomplete/wp-includes/functions.php on line 4486

I really should have added them earlier, when I set up the basic theme. I could go back and edit the post, but I thought it would be better to show you my mistake.

That’s what web development is – making lots and lots of mistakes. Hopefully you’ll learn from them, but more importantly they won’t frustrate you. We all try to hide them, and we start to think we’re the only ones that make them. But we all make mistakes. It’s better to accept your mistakes as an important part of the development process. That’s how we learn, and learning is a wonderful thing.

I’ve also made several other mistakes while writing this, like forgetting to add wp_head() and wp_footer() where they belong. You’d think I’d know by now!

Back to the autocomplete…

Okay, so I’ve added my header.php and footer.php and we now have an autocomplete field that’s reading from the database. That’s available in commit d8e0cff.

I’ve added some new posts to my demo WordPress install, and you should too, to see them appear. Here’s what I see now, with the debugging stuff commented out:

Autocomplete in WordPress, 2019

WordPress autocomplete (without AJAX) – Conclusion

The original post was about AJAX autocomplete in WordPress, but we’re not there yet. I want to continue the theme of making small, clear steps, but I’ll leave that for the next post. There’s a lot of little steps to go.

I’ll also cover questions and ideas from the comments of the original post.

For now, if you want to autocomplete without AJAX, you can download the complete sample theme code here: WordPress Autocomplete without AJAX.

What did you think of this? Is there anything I could do better? Let me know in the comments!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.