Read latest Technology News & never miss out

22Sep0

X

Thanks for voting !

up
2 down
0

Already voted!

Use ajax in wordpress default Search Function

Millions of developers are familiar with wordpress. WordPress in today’s internet world is not only a content management system but has become a global platform for building a website. WordPress by default comes with lots of functions , but sometimes we need to modify the function up to satisfactory level. Today we will discuss about one of those function which is commonly pronounced as wordpress default search functionality.
The default inbuilt wordpress search function form can be called using the below code

<?php get_search_form( bool $echo = true ) ?>

The Default wordpress search form filters works well but it refresh the page on every search and search results are not instantly fetched….

what we plan is to convert the wordpress search form into Ajax search form which shows the search result instantly below the form. In short we are going to Ajaxify the default wordpress search form. As we all know that Ajax is something which brings response from server to browser without refreshing the page. It updates the page on our request….

we have here ajax script for wordpress in which we can have instant search results without refreshing the page.
we can use this script whenever required by our clients. Below is the explanation for ajax search script. First we are going to see the HTML part which consist of input type text field and a div to load the results.

Now after placing the above HTML part in the place where actually form is required , we will move forward with jquery placement. The jquery will trigger on keyup() event. When the user enter something in the search form two events happens always

. The keyup() is sent to an element when the user releases a key on the keyboard. so we are going to use keyup().

1) Keydown event
2) Keyup event

so below is the jquery part which will trigger on keyup() and send an ajax request to wp-admin/admin-ajax.php by using a function(we will register later that function in wordpress functions.php) in action parameter.Adjustment may be required that weather to place the jquery part in footer/header.

Now its time to register the function get_search_list_via_ajax() in wordpress functions.php. The below function will consist of list li which stores the only title(with href link) of search results. we can extend the function to get the thumbnails and other data in search results.

Looking for a better dedicated resource ?

Join Our Newsletter

Stay updated with latest changes in technologies and get better business advice from us.

Your Name

Your email

Subscribe

ABOUT US

We at Webnius Infotech, believe in Client Satisfaction and Professional Quality of Secured Work exactly according to Google recommendations. With Encrypted and Quality work techniques, WEBNIUS sets the benchmark when it comes to Developing and Designing of Secured Websites and high-end web applications.