Я пытаюсь создать веб-приложение, которое может искать статьи в Википедии.Веб-приложение использует элемент ввода с типом «текст» для получения параметров поиска и кнопку «Поиск».У меня нет проблем с доступом к API Википедии при использовании кнопки «Поиск».В настоящее время я пытаюсь выполнить то же самое, запустив поиск при нажатии клавиши «Ввод».Для этого я проверяю «ключом вниз».Однако я получаю ошибку.Я уже пытался удалить все разрывы строк из строки перед тем, как отправить ее в виде запроса в 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>