Home / Tutorials / Autocomplete solution with jQuery and WordPress REST API

Autocomplete solution with jQuery and WordPress REST API


With the help of WordPress REST API search request we can get the results and pass them to jQuery’s label and id. For custom post types parameter subtype is used.

Parameters for the GET request are:

per_page=5&search=search-value&subtype=your-custom-post-type

Complete jQuery autocomplete example:

$("#" + eid).autocomplete({
  source: function (request, response) {
      $.ajax({
         url: wpApiSettings.root + 'wp/v2/search?per_page=5&search='+value+'&subtype=cpt',
            success: function (data) {
                var transformed = $.map(data, function (el) {
                    return {
                        label: el.title,
                        id: el.id
                    };
              });
              response(transformed);
          },
          error: function () {
              response([]);
          }
      });
  },
  onSelect: function (suggestion) {
    $("#" + eid).html(suggestion.value);
  }
});

Additional info for the search request options here: