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.

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