ruby-on-rails - JqueryUI Autocomplete 不是 Rails 5 中的功能

Question

我得到错误说：

(index):121 Uncaught TypeError: $(...).autocomplete is not a function

当我尝试将 JqueryUI/Autocomplete 添加到导航栏上的搜索框时。

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

应用程序.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

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

<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

路线.rb

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

标签： ruby-on-railsruby-on-rails-5jquery-ui-autocomplete