How to create a jQuery autocomplete drop down in WordPress

The autocompletion allows users to select from a pre-populated list of suggestions as they type. There are a number of jQuery autocomplete plugins. I’ll create an autocomplete from the post titles and redirect to a blog post based on selected option value. I’ll use jQuery UI autocomplete since it’s already included in WordPress. You can find demo: here.

Firstly, we need to enqueue jQuery UI and autocomplete libraries.

Secondly, we need to add a simple textbox in the front-end. I’ll attach jQuery UI autocomplete to it. I added a shortcode to output HTML text input field.

Also, add some CSS to make it nicer.

Autocomplete dropdown

Lastly, we need to enable autocomplete on our text input field and define the data to use. The datasource is a JavaScript array and you can define whatever you want – posts, pages, WooCommerce products, users and so on. If you have a lot of posts, then you should load a JSON file as source. Some useful links to documentation: option source, event select.

You can move JavaScript code to an external file.

Also, you can customize the select drop down with _renderItem method.

7 thoughts on “How to create a jQuery autocomplete drop down in WordPress”

  1. Hello,

    Thanks a lot for this AWESOME code, I’ve implemented it in my first plugin https://wordpress.org/plugins/full-screen-morphing-search/

    I’ll be mentioning your name, site and a link to this page on the next update.

    I’m new to jQuery ( and loved it right away 🙂 ) , so I was wondering how to expand the autocomplete for tags and categories. I know how to do the php part, but was unable to add it to the autocomplete.

    Thanks a lot in advance for your help.

    LebCit

    1. Hi LebCit,

      Congratulations on releasing your first plugin! I’m glad to hear that my post was useful. 🙂

      You need to use a custom source callback to filter out the posts based on the category or tag. In other words, you need to write a helper function. I found an example and tweaked it to meet your needs: https://jsfiddle.net/wknLgekz/7/ Hope this helps!

    2. Also, if you don’t want to see “Categories” and “Tags” in dropdown list, then you need to remove this part “.data( “ui-autocomplete” )….”

  2. Hi Dominykas, Thanks for this code.. I was looking for this for a long time.. Thanks Again.

    Its possible get the tags, not the title? Can you help me on this?

    Thanks

    1. Hey Carlos,

      Thanks for asking. If you need to get the tags instead of the title, then you need to change $source[$k][‘label’] = $post->post_title; to tags. I think you can use wp_get_post_tags($post->ID). Add this code http://pastebin.com/hgZqVb2g inside a loop and change this line $source[$k][‘label’] = $post->post_title; to $source[$k][‘label’] = $comma_separated_tags;

Leave a Reply

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