Question

我得到错误提示：

（索引）：121未捕获的TypeError：$（...）。autocomplete不是函数

当我尝试将JqueryUI /自动完成功能添加到导航栏上的搜索框中时。

我已经搜索过以找出问题，并且我知道发生此错误是因为在JqueryUI之后加载了Jquery。我已经检查了 head 标记，在JqueryUI之前加载了Jquery，但错误仍然发生。所以，我不知道为什么我的应用会出现此错误，请帮助我

application.js

//= require cocoon 
//= require activestorage 
//= require jquery3 
//= require jquery2 
//= require jquery 
//= require cocoon 
//= require activestorage 
//= require jquery3 
//= require jquery2 
//= require jquery 
//= require jquery-ui/widgets/autocomplete 
//= require turbolinks 
//= require rails-ujs 
//= require activestorage 
//= require bootstrap 
//= require_jquery.dataTables.min 
//= require_dataTables.bootstrap 
//= require_dataTables.jqueryui.min

这是我的应用程序 head 标签：

<link href="//fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" media="all" href="/assets/application.self-1a9ca860a208ba1cae80be140cc882a3dfa09cf4048365d3648fab8637f0b83e.css?body=1" data-turbolinks-track="reload">

<script src="/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery2.self-25ca496239ae8641a09627c8aace5863e7676e465fbb4ce81bc7eb78c4d15627.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/version.self-c8e3d1203da26ea7efdf83c1eabb3f0ba55cb68e463f5ccf0d77bd15ce6a8e61.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/keycode.self-ad63cd20acf49dd333bbbc537454d7d475bd610eb5b88de0dca009f0c3d314b1.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/position.self-1b49c8c521e67a4a88bfdad6b4d944d33686d25009a0e40a1e170acdd7b6962a.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/safe-active-element.self-a1f1a1a7dae3269ce03f6fffb2dcc9b4a7490f5d546c65d54417bec3be24b668.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/unique-id.self-66e85ac85cd0b6b8b1bb89369fc65f608f716869dc0930862a8d421a57a9580a.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/widget.self-fca20bcec06d192f97cffa6e734e24360e227237b8ae7d7e7e60754df7d5444f.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/widgets/menu.self-0730fe713007bd93e6db569352a20ed92448299505ff6f525bc0dc6dd488254e.js?body=1" data-turbolinks-track="reload"></script>

<script src="/assets/jquery-ui/widgets/autocomplete.self-6a89d7a43741ec810ef95de143a7c0297e2e4368ebecff64493ebb7a9ac3a524.js?body=1" data-turbolinks-track="reload"></script>

_nav.html.erb

<div class="search" style="width: 270px; position:relative;">
  <%= form_for products_path, method:"get", html: {class:"form-inline my-2 my-lg-0 float-right"} do |f| %>
    <%= f.text_field :term, type:'search', placeholder:'Enter name of product', class:"form-control", id:"search_input" %>
  <% end %>
</div>
<script>
  $(document).ready(function () {
    $('#search_input').autocomplete({
      source: ["foo", "food","fuck"],
      minLength: 1
    });
  });
</script>

products_controller.rb

 def search
  @products = Product.search(params[:term]).order_by_name
  render json: @products
 end

routes.rb

get '/search', to: 'products#search', as: 'search'

JqueryUI自动完成功能不是Rails 5中的功能

0 个答案: