Question

我试图弄清楚为什么运行提交（searchBtn）的函数无法正常工作。如果您对出了什么问题有任何疑问，我将非常感谢您的帮助！

$(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.");
        }
    })

这是释放回车键时运行点击功能的功能。它直接出现在上面的代码示例之后。

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

Answer 1

我就是这样做的，它删除了程序化点击并只运行该功能。

 $(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

在@SethWhite和/ r / learnprogramming的一些人的帮助下解决了以下代码：

$(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();
    }
  });
});

使用event.preventDefault（）;处理这个问题，因为每次调用ajax时，我们都会使用#seachInput重置''，导致输入表单提醒您一个空表单。

输入密钥以搜索不起作用

2 个答案: