I want a reside search with wp relaxation api with autocomplete, in vanilla js. I discovered this plugin makes exacly what I wanted. (I dont want this code as a plugin, its not an issue, but when it helps to make it simpler, if anybody is aware of how to do that code works with out it beign a plugin, let me know.)
TUTORIAL: https://sabrinazeidan.com/wp-rest-api-search-with-autocomplete-with-vanilla-js/
Github: https://github.com/sabrina-zeidan/sz-rest-api-tut
On this case, the plugin creates a web page into the instruments part nevertheless it doesnt offers me assist to combine it into the template , and I dont know the way execute it into the template on my own. The code is proven above:
<?php
/**
* Plugin Title: SZ WP REST API Tutorial
* Description: It is an instance of WP REST API utilization for search with autocomplete with vanilla JS
* Plugin URI:
* Creator: Sabrina Zeidan
* Creator URI: https://sabrinazeidan.com
* License: GNU Normal Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*
*/
outlined( 'ABSPATH' ) or die();
class SZ_WP_REST_API_Tut {
operate __construct() {
add_action( 'admin_menu', array( $this, 'admin_menu' ) ); //Add an merchandise to the Instruments menu
add_filter('plugin_action_links_' . plugin_basename(__FILE__), array( $this, 'plugin_actions_links' ) ); //Add a hyperlink on Plugins web page
add_action( 'rest_api_init', array( $this, 'rest_api_init') ); // Initialize the REST API routes.
}
public operate admin_menu() {
$hook = add_management_page( 'SZ WP REST API', 'SZ WP REST API', 'manage_options', 'sz-search', array( $this, 'admin_page_content' )); //Add a web page to the Instruments menu
add_action( "load-$hook", array( $this, 'admin_page_load' ) );//hook to load stuff on that web page
}
operate plugin_actions_links( array $actions ) {
return array_merge( array(
'sz-search' => sprintf('<a href="%s">%s</a>', esc_url( admin_url( 'instruments.php?web page=sz-search' ) ),esc_html__( 'See it', '' ))), $actions );
}
operate admin_page_load() {
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); // Load wanted JavaScript and CSS
}
operate enqueue_scripts() {
wp_enqueue_style( 'awesomplete-css', plugin_dir_url( __FILE__ ) . 'awesomplete/awesomplete.css'); //Awesomplete widget
wp_enqueue_script('awesomplete-js', plugin_dir_url( __FILE__ ) . 'awesomplete/awesomplete.js'); //Awesomplete widget
wp_enqueue_script('sz-search', plugin_dir_url( __FILE__ ) . 'search.js', array('awesomplete-js')); //Our Awesomplete settings are right here
wp_localize_script('sz-search', 'szsearch', array(
'search_url' => home_url( '/wp-json/sz-search/search?time period=' ), // URL to entry REST API endpoint
'nonce' => wp_create_nonce('wp_rest') ) //For authorization
);
}
operate rest_api_init() {
register_rest_route( 'sz-search', '/search', array(
'strategies' => 'GET',
'callback' => array( $this, 'sz_rest_api_search'), //precisely how we search
'permission_callback' => operate( WP_REST_Request $request ) { return current_user_can( 'manage_options' ); } //Prohibit endpoint to inner calls
) );
}
operate sz_rest_api_search( WP_REST_Request $request ) {
$search_term = $request->get_param( 'time period' );//Our enter from the sector
if ( empty( $search_term ) ) {
return;
}
//The best way we're gonna search
$args = array(
'post_type' => 'put up',
'post_status' => 'publish',
'posts_per_page' => 3,
'fields' => 'ids',
's' => $search_term,
'no_found_rows' => true,
'update_post_meta_cache' => false,
'update_post_term_cache' => false,
);
$the_query = new WP_Query( $args );
$this_blog_found_posts = $the_query->posts;
$temp = array();
foreach( $this_blog_found_posts as $key => $post_id) {
$temp = array(
'ID' => $post_id,
'permalink' => get_permalink($post_id),
'label' => get_the_title($post_id),
);
$posts[] = $temp;
}
if (!empty($posts)) return $posts;
}
operate admin_page_content() {
echo '<div class="wrap">';
echo '<h1>' . esc_html_x( 'SZ WP REST API Search with autocomplete with Vanilla JavaScript', 'admin web page title', 'sz-wp-rest-api-search' ) . '</h1>';
echo '<p>It is a search subject meant to demostrate a results of WP REST API. Does it work? :)</br>';
echo '<p><enter kind="text" dimension="80" id="sz-search-field" title="sz-search-field" worth="" placeholder="Start typing the title of the post...">';//Our search subject
echo '<br><enter kind="hidden" dimension="80" id="sz_result_id" title="sz_result_id" worth="">';//Hidden subject to move put up ID
echo '<br><enter kind="hidden" dimension="80" id="sz_result_permalink" title="sz_result_permalink" worth="">';//Hidden subject to move put up permalink
echo '</div>';
}
}
new SZ_WP_REST_API_Tut(); //Let's do it!
?>
What Ive tried is to create the thing, after which name the operate that reveals the enter subject.
<?php
$search = new SZ_WP_REST_API_Tut();
$search->admin_page_content();
?>
This reveals the enter subject, nevertheless it doesnt make the reside search works. I’d strive extra options on my own however on this case I dont know what extra can I do, I am stucked.