Autocomplete WordPress Search Form With WP REST API

By | May 16, 2017

Make an Autocomplete WordPress Search Form using WP REST API. There are many ways of creating autocomplete WordPress search form by using plugin or by adding custom script in a WordPress Website. But in this post I will give you an implementation of WP REST API V2 to creating an autocomplete search form based on post titles in a WordPress website.

First what you need to do is put this following script in your header ( header.php) theme after <head> before </head> tag.

< script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

You also can use wp_enqueue_script function in your WordPress theme function to load that script.

 

Add this following code in your footer theme right before </body> closing tag.

<script type="text/javascript">
 $(document).ready(function(){
 $(".field").autocomplete({
 source: function(request, response){
 var suggestURL = "http://localhost/wp/wp-json/wp/v2/posts?search=%QUERY";
 suggestURL = suggestURL.replace('%QUERY', encodeURIComponent(request.term)); 
 $.ajax({
 url : suggestURL,
 delay : 300,
 dataType : "json",
 type : "GET",
 success : function (data) {
 var transformed = $.map(data , function (el) {
 return {
 label : el.title.rendered,
 value : el.title.rendered,
 };
 });
 response(transformed);
 },
 error: function () {
 response([]);
 }
 });
 }
 });
});
</script>

In this case I use .field classname based on search form input class in my theme. It may be different in another themes.

< input type="text" class="field" name="s" id="sss" placeholder="Search"/ >

Please change the script on line 3 based on your search field class name on your theme.

 

Stylizing output. You can add or change the following css code to stylizing autocomplete output.

 .ui-corner-all {
 -moz-border-radius: 0;
 -webkit-border-radius: 0;
 border-radius: 0;
}
.ui-menu {
 border: 1px solid lightgray;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 15px;
}
.ui-menu .ui-menu-item a {
 color: #888;
}
.ui-menu .ui-menu-item:hover {
 display: block;
 text-decoration: none;
 color: #3D3D3D;
 cursor: pointer;
 background-color: lightgray;
 background-image: none;
 border: 1px solid lightgray;
}
.ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus {
 border: 1px solid lightgray;
 background-image: none;
 background-color: lightgray;
 font-weight: bold;
 color: #3D3D3D;
}

That’s tutorial how to make autocomplete wordpress search form using WP REST API V2 function

Related Posts

WP REST API V2 Auth

WP REST API Edit Post PHP cURL

Wordpess Tutorial WP REST API V2 Update Post by post id with PHP cURL

WP REST API V2 Auth

WP REST API Create User With PHP cURL

WP REST API Create User With PHP cURL. PHP code example to create user for your wordpress website.

WP REST API V2 Auth

WP REST API Delete Post PHP File Get Contents

WordPress WP REST API Delete Post Tutorial With PHP File Get Contents Function

WP REST API V2 Auth

WP REST API Get Featured Image URL

WordPress Tutorial WP REST API Get Featured Image URL in a Post

WP REST API V2 Auth

WP REST API jQuery Ajax Basic Authentication

WP REST API Basic Authentication With Jquery Ajax Tutorial and Code Example