WordPress tutorial for, Create an Autocomplete Search Field in wordpress. In wordpress also you can easily achieve the auto complete search form easily.

Create an Autocomplete Search Field in wordpress

Now auto complete search box is very common for every web projects. Auto complete search functionality you can see in google also. In wordpress also you can easily achieve the auto complete search form easily.

Create an Ajax-based Auto complete Search Field in wordpress

Create an Ajax-based Auto complete Search Field in wordpress

There is very nice Jquery plugin for auto complete. First download the latest version of jQuery , as well as the autocomplete plugin. Now, create a folder in your theme called “javascripts” and copy paste the two files in that folder. Open your header.php from your wordpress theme folder and put following code in that file.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
    var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
    $("#SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Just you need change the search input box id in place of SEARCH_INPUT_BOX.
If you are wordpress developer then only use the above code in header.php file. If you are facing any issue then please write to on support@wpapi.com.

Here are some very useful articles which are related to wordpress Search functionality.

Add a search from in your navigation menu of wordpress theme

Set the style for default search widget

Written by Purab Kharat

My name is Purab Kharat, Here is my Personal Blog: wpapi.com. Work as an Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA. I contributor of many wordpress plugins and Drupal Modules. I am core developer of Drupal. Connect to on LinkedIn or Follow @purab on Twitter or Follow me on Google+ or Write Mail to purabdk@gmail.com or Chat with me on Skype : purabdk

This article has 3 comments

  1. zoli Reply

    Very good script.Thank you,just for others who would like to use this make sure that instead of .autocomplete(data) you should use .autocomplete({source: data})

  2. Mike Reply

    You should NEVER include jQuery directly into the code. Enqueue it in your functions.php using wp_enqueue instead. Doing it the way you are showing above will result in multiple copies of Jquery loaded parallel. WordPress already includes jQuery by the way.

Leave a Comment

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