输入密钥以搜索无效

Question

I am trying to figure out why my function to run the submit(searchBtn) is not working correctly. If you have any idea on what is going wrong, I would appreciate the help!

$(document).ready(function() {

  //Click searchbtn and run our search

  $('#searchBtn').click(function() {
    // Get value of our searchbar that user inputs
    var searchInput = $('#searchInput').val();
    //reset our textbox when search is called
    $('#searchInput').val('');
    //set our search url with the API and searchInput
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?";

      $.ajax({
        data: "GET",
        url: url,
        async: false,
        dataType: "JSON",
        success: function(data) {

           $('#output').html('');
           for (let i = 0; i < data[1].length; i += 1) {
            $('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][0] + "</p></li>");
           }

        },
        error: function(errorMessage) {
          alert("There was a problem retrieving your results.");
        }
    })

This is the function to run the click function when the enter key is released. It appears directly after the code example above.

    $('#searchInput').keyup(function(event) {
        if (event.which === 13) {
          $('#searchBtn').click();
      }
    });
  });
});

Answer 1

This is how I'd do it, it removes the programmatic click and just runs the function.

 $(document).ready(function() {

   //Click searchbtn and run our search

   function search() {
    // Get value of our searchbar that user inputs
    var searchInput = $('#searchInput').val();
    //reset our textbox when search is called
    $('#searchInput').val('');
    //set our search url with the API and searchInput
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?";

      $.ajax({
        data: "GET",
        url: url,
        async: false,
        dataType: "JSON",
        success: function(data) {

           $('#output').html('');
           for (let i = 0; i < data[1].length; i += 1) {
            $('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][0] + "</p></li>");
           }

        },
        error: function(errorMessage) {
          alert("There was a problem retrieving your results.");
        }
    }

$('#searchBtn').click(search);
$('#searchInput').keyup(function(event) {
    if (event.which === 13) {
      search();
    }
 });
});

Answer 2

Solved with the help of @SethWhite and some people from /r/learnprogramming with the following code:

$(document).ready(function() {
   //Click searchbtn and run our search

   function search() {
    // Get value of our searchbar that user inputs
    var searchInput = $('#searchInput').val();

    //reset our textbox when search is called
    $('#searchInput').val('');
    //set our search url with the API and searchInput
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?";

      $.ajax({
        data: "GET",
        url: url,
        async: false,
        dataType: "JSON",
        success: function(data) {

           $('#output').html('').addClass('animated slideInUp');

           for (let i = 0; i < 5; i += 1) {
            $('#output').append("<li><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>");
           }

        },
        error: function(errorMessage) {
          alert("There was a problem retrieving your results.");
        }
    })
    $('#output').removeClass();
   }
  $('#searchBtn').click(function(event) {
      event.preventDefault();
      search();
    });
  $('#searchInput').keypress(function(event) {
    if (event.which == 13) {
      event.preventDefault();
      search();
    }
  });
});

Using event.preventDefault(); takes care of this, since each time the ajax is called, we are resetting the #seachInput with '' causing the input form to alert you of an empty form.