how to create a custom live search in WordPress from scratch

For creating live search just need send a GET request to wp-json no need to make a new query

just use this URL in ajax request:

<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value 

So ajax code should be like this:

<script>
        var GetSearch = document.getElementById('search');
         GetSearch.addEventListener("keyup", function(){
             //InfoData = {slug:GetSearch.value}
             $.ajax({
                type: "GET",
                url: '<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value ,
                data: '',
                datatype: "html",
                success: function(result) {
                    console.log(result);
                }
            });
         });
            
         </script>

and the HTML search input should be like this:

<input type="search" id="search" name="search" placeholder="search" autocomplete="off"/>

you must turn off the autocomplete of input

Leave a Comment