使用 "enter" 键使用维基百科 API 查找文章时出错

Question

我正在尝试构建一个可以搜索维基百科文章的网络应用程序。 Web 应用程序使用 "text" 类型的输入元素来获取搜索参数和 "Search" 按钮。使用 "Search" 按钮访问维基百科 API 没有问题。我目前正试图通过在按下 "Enter" 键时触发搜索来完成同样的事情。为此，我正在检查 "keydown"。但是，我收到一个错误。在将其作为查询提交给 Wikipedia API 之前，我已经尝试从字符串中删除所有换行符，但我仍然收到错误消息。该代码在 Codepen 上可用。我非常感谢对我的问题的任何回应。

$(document).ready(function() {
  function search(keyword) {
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" +
        keyword +
        "&prop=info&inprop=url&utf8=&format=json",
      //https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=epicurs&prop=info&inprop=url&utf8=&format=json\
      dataType: "jsonp",
      success: function(response) {
        alert(response.query.search[0].title);
        //TODO: show 10 results at a time. Be able to browse between result pages. Implement an 'enter page number' function that cannot go over the largest page number.
        //TO GET SPECIFIC ARTICLE: https://wikipedia.org/wiki/<<article title>>
      },

      error: function() {
        alert("Error retrieving search results, please refresh the page");
      }
    });
  }

  $("#article-search").on("keydown", function(e) {
    if (e.keyCode == 13) {
      $(".search-button").click();
    }
  });
  $(".search-button").on("click", function() {
    search($("#article-search").val());
  });
});

html,
body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.button {
  transition-duration: 0.4s;
  cursor: pointer;
}

.search-button {
  background-color: white;
  color: black;
  border: 2px solid #008cba;
}

.search-button:hover {
  background-color: #008cba;
  color: white;
}

.random-article {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

.random-article:hover {
  background-color: #4caf50;
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Wikipedia Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-te/1.4.0/jquery-te.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

</head>

<body translate="no">

  <div class="container-fluid text-center" id="display-result">
    <form>
      <div class="form-group">
        <label for="article-search">Search for a Wikipedia article:</label>
        <input type="text" class="form-control" id="article-search">
      </div>
    </form>
    <button class="button search-button">Search <i class="fa fa-search"></i></button>
    <a href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>
      <button class="button random-article">Random article <i class="fa fa-random"></i></button>
    </a>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.0.0/js/fontawesome-iconpicker.js'></script>

</body>

</html>

Answer 1

默认情况下，在表单的最后一个输入上按 Enter 键会提交表单。使用 Event.preventDefault(); 来防止这种情况。

如果您使用的是 AJAX，请删除 <form>。

$(document).ready(function() {
  function search(keyword) {
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" +
        keyword +
        "&prop=info&inprop=url&utf8=&format=json",
      //https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=epicurs&prop=info&inprop=url&utf8=&format=json\
      dataType: "jsonp",
      success: function(response) {
        alert(response.query.search[0].title);
        //TODO: show 10 results at a time. Be able to browse between result pages. Implement an 'enter page number' function that cannot go over the largest page number.
        //TO GET SPECIFIC ARTICLE: https://wikipedia.org/wiki/<<article title>>
      },

      error: function() {
        alert("Error retrieving search results, please refresh the page");
      }
    });
  }

  $("#article-search").on("keydown", function(e) {
    if (e.keyCode == 13) {
      $(".search-button").click();
      e.preventDefault();
    }
  });
  $(".search-button").on("click", function() {
    search($("#article-search").val());
  });
});

html,
body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.button {
  transition-duration: 0.4s;
  cursor: pointer;
}

.search-button {
  background-color: white;
  color: black;
  border: 2px solid #008cba;
}

.search-button:hover {
  background-color: #008cba;
  color: white;
}

.random-article {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

.random-article:hover {
  background-color: #4caf50;
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Wikipedia Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-te/1.4.0/jquery-te.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

</head>

<body translate="no">

  <div class="container-fluid text-center" id="display-result">
    <form>
      <div class="form-group">
        <label for="article-search">Search for a Wikipedia article:</label>
        <input type="text" class="form-control" id="article-search">
      </div>
    </form>
    <button class="button search-button">Search <i class="fa fa-search"></i></button>
    <a href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>
      <button class="button random-article">Random article <i class="fa fa-random"></i></button>
    </a>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.0.0/js/fontawesome-iconpicker.js'></script>

</body>

</html>

使用 "enter" 键使用维基百科 API 查找文章时出错

Error when using "enter" key to look for article using Wikipedia API

html

javascript

css

jquery

wikipedia-api