如何让 typeahead 和吸血犬工作轨道 6.1

如何解决如何让 typeahead 和吸血犬工作轨道 6.1

我在使 js 库 typeahead.js 在我的 rails 6.1.0 中工作时遇到问题。我有以下几点：

app/javascript/packs/application.js

    // This file is automatically compiled by Webpack,along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "stylesheets/application.scss"


Rails.start()
Turbolinks.start()
ActiveStorage.start()


// ----------------------------------------------------
// Note(lewagon): ABOVE IS RAILS DEFAULT CONFIGURATION
// WRITE YOUR OWN JS STARTING FROM HERE ?
// ----------------------------------------------------

// External imports
import "bootstrap";
import "typeahead.js";
import "imports-loader";
import "bloodhound-js";


// Internal imports,e.g:
// import { initSelect2 } from '../components/init_select2';
import { initTypeAhead } from '../components/init_type_ahead';

document.addEventListener('turbolinks:load',() => {
  // Call your functions here,e.g:
  // initSelect2();
  initTypeAhead();
});

init_type_ahead.js

const Bloodhound = import('bloodhound-js');

const initTypeAhead = () => {
  var properties = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace,queryTokenizer: Bloodhound.tokenizers.whitespace,remote: {
        url: '/?query=%QUERY&button=',wildcard: '%QUERY'
      }
    });
    $('#query').typeahead(null,{
      source: properties
    });
};

export { initTypeAhead };

properties_controller.rb

  def index
    # byebug
    if params[:query].present?
      @properties = Property.search params[:query][:city],operator: "or",fields: ["city^10","name"],match: :word_start,misspellings: {below: 5}
    else
      @properties = Property.all
    end
  end

  def autocomplete
    render json: Property.search(params[:query][:city],{
      fields: ["city^5",limit: 10,load: false,misspellings: {below: 5}
    }).map(&:title)
  end

_search-form.html.erb

      <div>
        <%= simple_form_for :query,url: root_path,method: :get,html: { class: "bg-white flex justify-between items-center rounded-full shadow-xl pl-8 h-20 mx-8" } do |f| %>
          <%= f.input :city,label:false,input_html: { id: "query",class: "rounded-full w-full text-gray-700 leading-tight border-none focus:ring-white" },placeholder: "Eivissa,Ibiza"  %>
          <div class="p-4">
            <%= f.button :button,class: "bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center flex-auto" do  %>
              <i class="fas fa-search"></i>
            <% end %>
          </div>
        <% end %>
      </div>

我正在关注 these instructions 以在我的搜索表单中自动完成（在输入单词时会出现一个下拉列表，其中包含即将出现的结果），但我现在无法让 JS 工作。当我查看 chrome 控制台内部时，出现以下错误：

init_type_ahead.js:5 Uncaught TypeError: Cannot read property 'whitespace' of undefined
    at initTypeAhead (init_type_ahead.js:5)
    at HTMLDocument.<anonymous> (application.js:37)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:5)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:6)
    at r.pageLoaded (turbolinks.js:6)
    at turbolinks.js:5

我已按照解决方案 here 进行操作，但无济于事。

这是我的 package.json 文件：

{
  "name": "ibicasa-2-0","private": true,"dependencies": {
    "@rails/actioncable": "^6.0.0","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "5.2.1","@tailwindcss/aspect-ratio": "^0.2.0","@tailwindcss/forms": "^0.2.1","@tailwindcss/line-clamp": "^0.2.0","@tailwindcss/typography": "^0.3.1","bloodhound-js": "^1.2.3","bootstrap": "^4.5.3","imports-loader": "^2.0.0","jquery": "^3.5.1","popper.js": "^1.16.1","tailwindcss": "yarn:@tailwindcss/postcss7-compat","turbolinks": "^5.2.0","typeahead.js": "^0.11.1"
  },"version": "0.1.0","devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

我不知道还能做什么。没想到解决起来这么难。感谢您的帮助。