jQuery自动完成不是功能控制台错误

Posted 2023-05-08

【中文标题】jQuery自动完成不是功能控制台错误

【英文标题】：jQuery autocomplete is not a function console error

【发布时间】：2016-11-28 03:00:38

【问题描述】：

我正在尝试为 FreeCodeCamp 的 Wikipedia 搜索 API 项目构建自动完成功能。我已经导入了 jquery 和 jquery-ui 并为它编写了 $("#searchTerm").autocomplete() 函数。当前，在自动完成功能中运行 ajax 调用时，它会将 errorMessage 打印到控制台上。我已将以下 js 导入到 codepen。

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>

【问题讨论】：

我猜你在input 上使用change 事件searchTerm。当它仍然为空时，您在开始时运行代码。希望对您有所帮助。

【参考方案1】：

事实证明，当您通过笔设置添加外部 js 库时，codepen 会重新排序导入。这导致 .autocomplete 不是一个函数。 所以我在 html 代码中添加了这些行并解决了这个问题。