【发布时间】：2018-05-25 23:27:13
【问题描述】：
我正在尝试构建一个可以搜索维基百科文章的网络应用程序。 Web 应用程序使用“文本”类型的输入元素来获取搜索参数和“搜索”按钮。使用“搜索”按钮时，访问 Wikipedia 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>【问题讨论】：
标签： javascript jquery css html wikipedia-api