Building an AJAX Search Form with Separate Results: A Step-by-Step Guide

Step 1: Activate the custom plugin: Ajax Post Search found here Ajax Post Search

Step 2: Add a Code Box and Insert the First Code:

<form id="post-search-form" action="<?php echo esc_url(admin_url('admin-ajax.php')); ?>" method="POST">
  <div class="search-wrapper">
    <input type="text" id="post-search-input" name="post_search" placeholder="Search" autocomplete="off">
  </div>
</form>

Step 3: Add Another Code Box and Insert the Second Code:

<ul id="post-search-results" class="search-results"></ul>

Step 4: Customization!!!

  • Locate the main PHP file of the plugin named ajax-post-search.php.
  • Open the file in a code editor of your choice.
  • Look for the section or function that handles query arguments or customization.
  • Modify the code according to your desired query arguments or customization options.
  • Save the changes to the PHP file.

Note: If you want to customize the CSS, you may need to locate the CSS file of the plugin and make the necessary modifications. Additionally, in the main JavaScript (JS) file, you can customize the search feature by modifying the functions within that file.

Disclaimer: The back button on our search form, is not included in the above code snippets. It is added separately using another code snippet. If you have any questions or need further assistance with the plugin settings or customizations, please contact us through our support channels.

Share this post