JSFiddle - React, Tailwind, and code Playground

by Sourav Chatterjee

HTML

<form action="/" id="searchForm">
    <input type="text" name="s" placeholder="Search...">
    <input type="submit" value="Search">
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>
  <p id="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>

JavaScript

$(document).ready(function() {
  $("#searchForm").submit(function(event) {
    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $(this),
      term = $form.find("input[name='s']").val(),
      url = $form.attr("action");

    // Send the data using post

    var posting = $.post(
      url, {
        s: term
      },
      myPostWasSuccessful,
      'html'
    );
  });
});

function myPostWasSuccessful(data, textStatus, jqXHR) {
  $("#result").html(data);
}