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

WP REST API Create Category PHP cURL

Wordpress Tutorial WP REST API V2 Create Category With PHP cURL with code example

WP REST API V2 Auth

WP REST API Upload Image Media

Wordpress WP REST API V2 tutorial and code example upload image / media with PHP cURL

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 Delete Post With PHP cURL

Wordpress tutorial WP REST API Delete Post With PHP cURL with code example

wp rest api v2

WP REST API Get Posts By Category

WordPress REST API tutorial get posts by category id with php script