I am trying to build the autocomplete feature for the Wikipedia search API project of FreeCodeCamp. I have imported jquery and jquery-ui and have written the written the $("#searchTerm").autocomplete() function for it. Currently its printing errorMessage onto the console while running the ajax call in the autocomplete function. I have made the following js imports into the codepen.
jquery-2.2.4.min.js
jquery-ui.min.js
jqueryui/1.11.4/jquery-ui.min.js
smoothness/jquery-ui.css
The Codepen view can be found here https://codepen.io/akshay_nayak/pen/JKvbwV?editors=1111
$(document).ready(function(){
$('#search').click(function(){
//get search input
var searchterm=$('#searchTerm').val();
//wikipedia url
var url="https://en.wikipedia.org/w/api.php?action=opensearch&search="+searchterm+"&format=json&callback=?";
$.ajax({
type:"GET",
url:url,
aysnc:false,
dataType:"json",
success:function(data){
$("#output").html("");
for(var i=0;i<data[1].length;i++){
$('#output').append("<li><a href="+data[3][i]+" target='blank'>"+data[1][i]+"</a><p>"+data[2][i]+"</p></li>");
}
$("#searchTerm").val('');
},
error:function(errorMessage){
alert("Error");
}
});
});
$("#searchTerm").keypress(function(val){
if(val.which==13){
$("#search").click();
}
});
$("#searchTerm").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
console.log(data[1]);
response(data[1]);
},
error: function(errorMessage){
console.log(errorMessage);
}
});
}
});
});body{
font-family:'Open Sans', sans-serif;
background-image:url('http://res.cloudinary.com/dhsijxcsp/image/upload/v1469332141/sayagata-400px_fppgmf.png')
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="text-center">
<h1>Wikipedia API search</h1>
<h4>FCC Front End Development</h4>
<a href="https://en.wikipedia.org/wiki/Special:Random" target="blank">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png">
</a>
</div>
<input class="form-control" id="searchTerm">
<button id="search" type="button" class="btn btn-primary">Search</button>
<ul id="output">
</ul>
</div>
changeon yourinputforsearchTerm. You run the code at the beginning when it is still empty. Hope it helps.