How to create Autocomplete Search Function in WordPress without plugin

Today I will guide you to a related ajax article as well as tips and tricks in wordpress. In my opinion, the Search autocomplete function is also quite good and necessary for our website, it helps the website become professional and customers feel more interested.

To implement this function, we do the following:

Step 1: Create search form in header.php file or anywhere you want. The search form code will look like this.

<div class="header__search">
   <form action="<?php bloginfo('url'); ?>/" method="GET" role="form">
      <div class="main-input"><i class="fa fa-search"></i>
         <input type="text" id="form-search" name="s" autocomplete="off" placeholder="Keyword ...... " class="form-control input-search">
      </div>
   </form>
   <div id="load-form"></div>
</div>

<div id=”load-form”></div> is the area to display the returned results

Step 2: Use jquery to call ajax and send data to the server for processing, we use ajax to manipulate data faster. You can insert this code in the footer or js file depending on you. Like me, I will create a new js file for this ajax load data.

<script>
    var timeout = null; // declare the variable timeout
    $(".main-input .input-search").keyup(function(){ // catch event when typing search keyword
        clearTimeout(timeout); // clear time out
        timeout = setTimeout(function (){
           call_ajax(); // call ajax
        }, 500);
    });
    function call_ajax() { // ajax function initialization
        var data = $('.main-input .input-search').val(); // get data while typing keywords in the box
        $.ajax({
            type: 'POST',
            async: true,
            url: my_ajax_object.ajax_url, // ajax register function
            data: {
                'action' : 'Post_filters', 
                'data': data
            },
            beforeSend: function () {
            },
            success: function (data) {
                $('#load-form').html(data); // show data when returning
            }
        });
    }
</script>

The keyup function is a function in jquery that captures the action when we type on the keyboard

The js ajax registration function I created in the functions.php file is as follows. Please refer to the code below!

//---------------create js ajax
function my_enqueue() {
	wp_register_script('loadajax-js', get_template_directory_uri() .'/assets/js/myloadmore.js', array(), 1, 1, 1 );
	wp_enqueue_script('loadajax-js');
    wp_localize_script( 'loadajax-js', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Step 3: Receive data, process and then return the results to the user. You insert this code into the functions.php file.

// Ajax handling
add_action('wp_ajax_Post_filters', 'Post_filters');
add_action('wp_ajax_nopriv_Post_filters', 'Post_filters');
function Post_filters() {
	if(isset($_POST['data'])){
		$data = $_POST['data']; // receive data from client
		echo '<ul>';
		$getposts = new WP_query(); $getposts->query('post_status=publish&showposts=10&s='.$data);
		global $wp_query; $wp_query->in_the_loop = true;
		while ($getposts->have_posts()) : $getposts->the_post();
		echo '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>'; 
		endwhile; wp_reset_postdata();
		echo '</ul>';
		die(); 
	}
}

Step 4: Display the results. As you noticed in step 2, I used $(‘#load-form’).html(data). This is the place to show the data.

Currently, I display data under the <ul></ul> tag. You can also customize it according to your style. And don’t forget to add css to make it beautiful.

Above is the entire code as well as the process of creating an autocomplete search form in wordpress. Please read and follow, the results will be as expected