Create an autocomplete field in WordPress: 2019 Update

David Nash wordpress 5 Comments

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!

Comments 5

  1. Hi David,

    Nice tutorial so far, I was wondering about: http://leaverou.github.io/awesomplete/

    It is lightning fast since no ajax is needed and everything is populated in the data-list, but in terms of using it for WordPress, I noticed it only searches post titles, it doesn’t search actual post content.

    Do you see this as limiting and not thorough? In some cases, this is all you need, but if you want more advanced search I don’t think awesomeplete would be ideal, but I just discovered this so will look deeper. Thanks.

    1. Post
      Author

      Hi Lukasz

      Thanks for your comment – and yes, you’re correct, this is a little limiting, only searching post titles. But it’s not Awesomplete that’s doing that, it’s the code I wrote for the tutorial, just to keep it simple.

      If we wanted to search the post content, we’d need to use AJAX. I’ve had a “Part 2” in the works for quite a while, but got distracted by work and other side projects.

      The post is based on plain javascript, without any libraries. Would you like to see that, or should I use jQuery? That library isn’t needed so much any more, but I think lots of people are more comfortable with jQuery. What do you think?

  2. Yes, that would be great if you did a tutorial with AJAX since I can’t find any that integrates with WordPress.

    You pose a good question about jQuery vs Native JS, I think it’s still in the transition period between abandoning jQuery and going native. Gutenberg is pushing the use of native JS, bootstrap is planning to abandon using jQuery and use native as well. However, when it comes to WordPress users, including myself, we are very ingrained with using jQuery and more comfortable with it. If you did the tutorial with jQuery then I’m sure more advanced user can easily translate it to native if they want.

    Saying that I’m okay which ever path you take!

    I just wanted to add, did you ever think of using WP REST API instead?

    1. Post
      Author

      Thanks Lukasz. I’ve written about half the post using native JS, so I think I’ll just finish that. Then I can always do a jQuery post if people want it.

      With the WP REST API, I’ve been vaguely aware of it but never really used it. I’ll have a deeper look into it. It might be easier to use that than having to write database queries and converting the results to JSON.

  3. Pingback: Autocomplete with AJAX in WordPress: 2019 - David Nash

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.