Create an Ajax-based Auto complete Search Field in wordpress

Create an Autocomplete Search Field in wordpress

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@purabtech.in.

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

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, PHP, DevOps technologies and Opensource Frameworks. Github Repo: Purab Youtube Chanel Purab Code Book Connect to on LinkedIn or Follow @purab on Twitter or Write Mail to purabdk@gmail.com

3 thoughts on “Create an Autocomplete Search Field in wordpress”

  1. 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. 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 Reply

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