CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Akshay Vasant Nayak
Akshay Vasant Nayak

Reputation: 11

jQuery autocomplete is not a function console error

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>

Upvotes: 0

Views: 851

Answers (1)

Akshay Vasant Nayak
Akshay Vasant Nayak

Reputation: 11

It turn out that codepen reorders the imports when you add external js libraries through the pen settings. That was resulting in .autocomplete is not a function. So I added these lines in the html code and that solved the issue.

Upvotes: 1

Related Questions