So I created a Wikipedia API where I wanted to add a keypress function. Instead of just clicking the Submit button to make the Ajax call, the user can do it by hitting the enter key. I have the code, but it’s not working. Any help in appreciated.
Here is the HTML Code:
<form id="wiki_category">
<input type="text" placeholder="Find an article's categories" id="category-term">
<button id="category-button" type="button">Submit</button>
</form>
Here is the script code:
function getCategories(){
//gets search input
var category = $('#category-term').val();
//api url with search term
var link = "https://en.wikipedia.org/w/api.php?action=parse&page=" + category + "&prop=categories&format=json&callback=?"
$.ajax({
type:"GET",
url:link,
async:false,
dataType: "json",
success: function(data){
//necessary to erase the old content
//$('#output').html('');
for(var i=0;i<data.parse.categories.length;i++){
var category_Word = data.parse.categories[i]["*"];
var category_Link = "https://en.wikipedia.org/wiki/Category:" + category_Word
console.log(category_Word);
console.log(category_Link);
$('#output').append("<li><a href= " + category_Link + ">" + category_Word + "</a></li>");
//add an error message
}
}
})
}
$(document).ready(function(){
//when search button is clicked, run code
$('#category-button').on('click', function(){
getCategories();
});
$('#category-term').keyup(function(e){
if(e.keyCode == 13){
getCategories();
}
})
});
Any help would be good. Thanks