Das Entfernen von Inline-Javascript schlägt fehl ⇐ JavaScript

[Anonymous]

Eine Rails 7.1-Ansichtsdatei wird mit Inline-Javascript wie folgt ausgeführt.

Code: Select all

var autoComplete = (function(){
[ ... contents of .js file. see below]


var demo1 = new autoComplete({
selector: '#user_municipal_other',
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ;
var suggestions = [];
for (var i = 0; i < choices.length; i += 1) {
if (choices[i].toLowerCase().indexOf(term) !== -1) suggestions.push(choices[i]);
}
suggest(suggestions);
}
});

Der Versuch, das Inline-Javascript zu entfernen, schlägt fehl. Es werden mehrere Versuche beschrieben.
Anheften zweier Versionen, separater Versuche, in importmap.rb

Code: Select all

pin "pixabay-javascript-autocomplete", to: "https://ga.jspm.io/npm:[email protected]/auto-complete.min.js"
pin "auto-complete", to: "auto-complete.js"

Letzteres ist die nicht minimierte Version des genannten Skripts und die Datei befindet sich im Verzeichnis app/javascript.

Code: Select all

application.js

verfügt jeweils über die aktivierten Pins

Code: Select all

import PixabayJavascriptAutocomplete from "pixabay-javascript-autocomplete"
import AutoComplete from "auto-complete"

Mit der von außen gelieferten Version kommuniziert die Konsole keine Fehler. Bei der lokal bereitgestellten Version meldet sich die Konsole mit Uncaught SyntaxError: Das angeforderte Modul „http://localhost:3000/assets/auto-compl ... cffed48.js“ bietet keinen Export mit dem Namen: 'Standard'. Ich kann mir nicht vorstellen, warum identischer Code (abgesehen von der Minimierung) zwei unterschiedliche Verhaltensweisen erzeugen würde.
In beiden Fällen beschwert sich die Konsole darüber, dass Uncaught ReferenceError: autoComplete is not definiert ist, und bezieht sich dabei auf die Zeile var demo1 = new autoComplete des javascript_tag. Daher greift das Skript auf der Seite nicht auf das im Header geladene Skript zu

Code: Select all

Ein nächster Schritt bestand darin, index.js Folgendes hinzuzufügen:

Code: Select all

import AutoCompleteMunController from "./auto_complete_mun_controller"
application.register("auto-complete", AutoCompleteMunController)

mit auto_complete_mun_controller.js definiert als:

Code: Select all

import { Controller } from "@hotwired/stimulus";

// initialize only when the page / element exists
// use turbo:load for Turbo Drive support (or DOMContentLoaded if not using Turbo)
document.addEventListener("turbo:load", () => {
const el = document.querySelector("#user_municipal_other");
if (!el) return;

new autoComplete({
selector: '#user_municipal_other',
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ;
var suggestions = [];
for (var i = 0; i < choices.length; i += 1) {
if (choices[i].toLowerCase().indexOf(term) !== -1) suggestions.push(choices[i]);
}
suggest(suggestions);
}
});
});

aber der Aufruf zum Rendern der für die automatische Vervollständigung erforderlichen Instanzvariablen hat einen SyntaxError: erwarteter Ausdruck, bekam '