Implement Autocomplete for a custom field on WordPress Plugin Frontend

I’ve setup my plugin to be used on the frontend using a shortcode. I have managed to use an autocomplete form on a previous website I programmed from scratch (not WP based) but I don’t understand how to make it work on WP 4.0.

I have this form to allow my clients to add their own customers:

<form method="post">
<div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-3">
            <label>Name</label>
            <input name="name" id="name" type="text" placeholder="Name" required>
        </div><input type="submit"></form>

To avoid different users entering the same person twice, I need an autocomplete dropdown to get results from a MySQL database (custom table) to show the user the %LIKE% result.

What I don’t understand is:

  • To call the jQuery, do I have to call it from the main plugin file or on each file I setup?
  • Then, how do I use it?

Solutions Collecting From Web of "Implement Autocomplete for a custom field on WordPress Plugin Frontend"

Please refer to wp_script_is( $handle ) to check if a script is already enqueued or registered.

It’s a good idea to check before registering / loading a new script in WordPress. Since jQuery is included with WordPress and assuming you’re already using a custom WordPress theme I’m going to say it’s most likely already loaded.

You could check this by checking the “resources” tab on your browser (the Scripts folder) with your website opened.

Even simpler, you could check that jQuery is loaded on your website by going to the Console tab and typing in: jQuery(); – if that’ returns something, it means it’s already loaded.

I think, and correct me if I’m wrong, your problem is that you don’t actually know where to place your JS code for the autocomplete part. If that’s the case (your question was a bit ambiguous), please answer here so we can point you in the right direction.

Thanks.