Autocomplete with AJAX in WordPress

Autocomplete with AJAX in WordPress: 2019

David Nash code, tutorial, wordpress Leave a Comment

This is the second part of Create an autocomplete field in WordPress: 2019, which works well if you don’t have that many options. If you have less than 10 options, use a select element. Less than 100-1000 (depending), you don’t need AJAX. If you have more than 100-1000, you’ll probably need to use autocomplete with AJAX. This means the page will load faster, and we’ll limit the data to entries that more closely match what the user is looking for. We didn’t even need Javascript for the previous part. What we’re doing now is a bit more complex, so we’ll …

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 …

Create an auto-complete field in WordPress

David Nash wordpress 115 Comments

I’m working on a project that has a large database – about 14,000 business listings. It also has a page for a user to sign up and select which business they work at. 14,000 is way too many options for a SELECT (drop-down) field and I don’t want to put that much load on the MySQL database either. My solution: an auto-complete text field that reads from the WordPress database. I take it one step at a time, and make sure each step works correctly before starting the next step. Here are the steps I took to do it. Front-end JavaScript …