我有一个搜索表单，我想让它在页面底部输出结果而无需重新加载。

<form action='' method='post'>
<div id="search-form">      
<input type="text" name="search" class="search-field" id="search" value="" />
<div class="submit-container">
<button type="button" value="" class="submit" id="searchbutton" onclick="searchoutput()" /></button>
            </div>
  </form>
  <br><br>
  <p>Type First Name</p>

我希望在单击按钮时使用 Ajax 调用另一个脚本，在下方显示搜索结果。我一直收到错误：“未捕获的 ReferenceError：searchoutput 未在 HTMLButtonElement.onclick 中定义

这是我的 javascript（使用 jquery）：

$( document ).ready(function() {
function searchoutput() {
     if($(".search-field").val().length > 5) { //only shows results when more than 5 characters have been entered
        var search = $(".search-field").val();
        var update = $(".result");
        var goal = 0;
        $.get("query-include.php" , {search: search, goal: goal})
        .done(function( data ) {
          update.empty();
          update.append(data);
          $(this).remove();
                                });
                                             };
                         } 
  $( ".search-field" ).keydown(function() {
      var update =$(".results");
      update.empty();
                                       });
                             });

我查看了其他帖子，花了很长时间尝试自己找到解决方案。奇怪的是，如果我为“keyup”添加事件侦听器，以便在用户键入时运行相同的函数 searchoutput：

var searchfield = document.getElementById("search");
searchfield.addEventListener("keyup", searchoutput);

然后我没有收到 ReferenceError，脚本运行良好。我只在单击按钮时遇到函数问题。