Search results clear was loaded might be broswer not sure

$(document).ready(function() {
  
  $("#search").click(function() {
    var searchBar = $("#searchBar").val();

    var api =
      "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
      searchBar +
      "&format=json&callback=?";

    $.ajax({
      type: "GET",
      url: api,
      async: false,
      dataType: "json",
      success: function(data) {
        $("#results").html(" ");
        for (i = 0; i < data[1].length; i++) {
          $("#results").prepend(
            "<li><a href=" +
              data[3][i] +
              ">" +
              data[1][i] +
              "</a><p>" +
              data[2][i] +
              "</p></li>"
          );
        
        }
      },

      error: function(errorMessage) {
        alert("Error");
      }
     
    });
  });
});

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Could you be clearer about your question? Your post is lacking in details and I’m not sure what to make of the title. If you’re using Codepen, post a link to your pen as well.

Thanks

The problem is that your form is submitting data by default, which reloads the page. You have two options:

  1. Specify the button type as “button” (default is “submit”)
<button type="button" class="btn" id="search"></button>
  1. Use the event object that gets passed to every event handler. The event object has a method, preventDefault, which will prevent the button from submitting.
$("#search").click(function(event) {
    event.preventDefault()
}
1 Like