jQuery自動完成功能不是功能控制檯錯誤

我正在嘗試爲FreeCodeCamp的維基百科搜索API項目構建自動完成功能。我已經導入了jquery和jquery-ui，並且寫了$（「＃searchTerm」）。autocomplete（）函數。目前，它在自動完成功能中運行ajax調用時將errorMessage打印到控制檯上。我已經將以下js導入到codepen中。jQuery自動完成功能不是功能控制檯錯誤

的jquery-2.2.4.min.js

的jquery-ui.min.js

jQueryUI的/ 1.11.4/jQuery的ui.min.js

平滑/ jquery的-ui.css

的Codepen視圖可以在這裏找到 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>

來源

2016-07-24 Akshay Vasant Nayak

我猜你使用事件'change'您'input'爲'searchTerm'。當它仍然是空的時候，你開始運行代碼。希望能幫助到你。 – lrnzcig

它會證明codepen重新排列進口，當你通過筆設置添加外部JS庫。這導致.autocomplete不是一個函數。因此，我在html代碼中添加了這些行，解決了這個問題。

來源

2016-07-24 21:26:56

jQuery自動完成功能不是功能控制檯錯誤

回答

相關問題