Javascript 输入键搜索不工作

我正在试图弄清楚为什么我运行submit（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.");
        }
    })

---

这就是我要做的，它删除了编程点击，只运行函数

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

$（文档）.ready（函数（）{
//单击searchbtn并运行我们的搜索
函数搜索（）{
//获取用户输入的搜索栏的值
var searchInput=$（'#searchInput'）.val（）；
//调用搜索时重置文本框
$（'#searchInput'）.val（''）；
//使用API和searchInput设置我们的搜索url
变量url=”https://en.wikipedia.org/w/api.php?action=opensearch&search=“+searchInput+”&format=json&callback=？”；
$.ajax({
数据：“获取”，
url:url，
async:false，
数据类型：“JSON”，
成功：功能（数据）{
$（'#output'）.html（''）；
对于（设i=0；i”+数据[2][0]+”
”）；
}
},
错误：函数（错误消息）{
警报（“检索结果时出现问题。”）；
}
}
$（#searchBtn'）。单击（搜索）；
$（'#searchInput'）.keyup（函数（事件）{
if（event.which==13）{
搜索（）；
}
});
});

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

$（文档）.ready（函数（）{
//单击searchbtn并运行我们的搜索
函数搜索（）{
//获取用户输入的搜索栏的值
var searchInput=$（'#searchInput'）.val（）；
//调用搜索时重置文本框
$（'#searchInput'）.val（''）；
//使用API和searchInput设置我们的搜索url
变量url=”https://en.wikipedia.org/w/api.php?action=opensearch&search=“+searchInput+”&format=json&callback=？”；
$.ajax({
数据：“获取”，
url:url，
async:false，
数据类型：“JSON”，
成功：功能（数据）{
$（'#output'）.html（'.addClass（'animated slideInUp'）；
对于（设i=0；i<5；i+=1）{
$（'#output'）。追加（“
”+数据[2][i]+”
”）；
}
},
错误：函数（错误消息）{
警报（“检索结果时出现问题。”）；
}
})
$（'#output'）.removeClass（）；
}
$（'#searchBtn'）。单击（函数（事件）{
event.preventDefault（）；
搜索（）；
});
$（'#searchInput'）。按键（函数（事件）{
if（event.which==13）{
event.preventDefault（）；
搜索（）；
}
});
});

---

使用event.preventDefault（）；注意这一点，因为每次调用ajax时，我们都会用

'

重置

#seachInput

，使输入表单提醒您有空表单。

删除单击和键控事件，并绑定到表单的提交事件。

var searchBtn='#searchBtn'

？？´工作不正常´如何工作？您是否检查了控制台中的错误？预期的结果是什么？实际发生的情况是什么？您的错误是什么？是否触发了提交回调？是否收到响应？控制台中是否有错误？是否确定函数未运行？或其他错误？这看起来好多了，但在预输入enter键时，它仍然不会运行Sed。当按下submit按钮@SethWhiteInteresting时，我仍然可以访问ajax调用……您是否有任何其他正在收集击键的事件？这些事件是否调用类似preventDefault（）的内容？在你的keyup函数回调中删除一个控制台日志，看看它是否被调用。如果它没有被调用，则有东西正在拦截你的keyup事件。这就是为什么这么奇怪。应该没有什么东西阻止它被调用，但我对它进行了处理，没有打印任何内容。我甚至编写了你的代码，注释了我的代码，没有任何更改。这是一个代码钢笔所以如果你想查看它，它至少是抱歉，被抓到了，看起来你把它固定在你的代码笔上了。我猜这是因为它的形式是你必须执行事件的形式。preventDefault。很高兴知道：）您应该将您的解决方案作为答案发布。我会这样做。是的！我必须确保存在事件。默认设置为“回车”键和“提交”按钮。我的

上还有一个

必需的
属性，不应该存在！
$(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();
    }
  });
});