JavaScript Suchfeld mit Vorgaben die angezeigt werden, bei Eingabe (Javascript)

[Christian_1987]

Ich bin gerade am Verzweifeln und suche zur Zeit eine Lösung um das Problem zu beheben. Selbst Chatgpt kann mir keine richtige Auskunft darüber geben, daher frage ich die ComputerBase Community.

Vielleicht kennt sich Jemand aus und kann mir behilflich sein.

Im Anhang befindet sich ein Bild welches zur Veranschaulichung dient. Ich habe ein Suchfeld:

<input type="search" id="search" class="search_field" name="field_search" placeholder="Search ..." />

In der obigen Zeile, kann man es gut erkennen. Dort befindet sich ein Suchfeld und ich will, dass bei Eingabe eines Buchstaben einige Begriffe angezeigt werden.

In HTML und CSS kenne ich mich zwar gut aus, aber in Javascript bin ich eine komplette null. Hat Jemand Rat für mich?
Beste Grüße

 

[Tornhoof]

Du meinst type ahead mit fixer Liste, manchmal auch Local Data genannt.
Zb
https://www.npmjs.com/package/typeahead-standalone?activeTab=readme

 

[floq0r]

"Autocomplete"

 

[Christian_1987]

Du meinst type ahead mit fixer Liste, manchmal auch Local Data genannt.
Zb
https://www.npmjs.com/package/typeahead-standalone?activeTab=readme

Habe mich damit beschäftigt, danke erstmal für den Link.

Bin jedoch mit den Dateien völlig überfordert, kann diese nicht implementieren. Dachte er an einfaches HTML und Javascript.

"Autocomplete"

Danke. Da bin ich erstmal überfragt. Sind nicht viele Links vorhanden, aber der Begriff ist schonmal sehenswert und nützlich. Wobei auch da zu viele src. Dateien vorhanden sind und diese sich nicht einfach einpflegen lassen.

 

[SheepShaver]

Es gibt eigentlich keinen Grund mehr, heutzutage mit losen html- und js-Dateien rumzuhantieren.
Auch für eine einfache Webpage würde ich sowas wie vite nehmen:
https://vite.dev/

npm create vite@latest my-page -- --template vanilla
cd my-page
npm install
npm run dev

Zum Installieren von Dependencies:

npm install --save typeahead-standalone

In der js-Datei:

import typeahead from 'typeahead-standalone'; // imports library (js)
import 'typeahead-standalone/dist/basic.css'; // imports basic styles (css)

Ohne Bundler musst du halt selbst irgendwo das Skript laden:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeahead-standalone/dist/basic.css" />
<script src="https://cdn.jsdelivr.net/npm/typeahead-standalone"></script>

Dann hängt das aber unter dem globalen window Objekt, also:

const inputElement = document.getElementById("searchInput");

window.typeahead({
  input: inputElement,
  source: {
    local: colors,
    // prefetch: {...}
    // remote: {...}
  }
});

searchInput ist dein HTML-Input-Element.

 

[Christian_1987]

@SheepShaver Davon verstehe ich null. Aber ich will deinen Vorschlag nicht in irgend einer Weise als falsch darstellen.

Habe mir das ziemlich einfach vorgestellt, scheint aber ein schwieriges Thema zu sein.

 

[Andarkan]

Davon verstehe ich null.

Warum machst du das alles dann überhaupt?

 

[Christian_1987]

@Andarkan Weil ich mich grundsätzlich mit HTML, CSS und ein wenig mit Javascript beschäftige.

Ich bin kein backend developer sondern ein Webdesigner.

 

[SheepShaver]

Das hier Besprochene ist alles Frontend. Du solltest dir ein Low Code oder No Code Framework raussuchen, wenn du kein JavaScript selbst schreiben willst.

Ansonsten ist Astro wahrscheinlich das einsteigerfreundlichste Framework.
https://astro.build/

 

[Christian_1987]

npm create vite@latest my-page -- --template vanilla
cd my-page
npm install
npm run dev

Mir fehlen die Kenntnisse und ich würde stark anzweifeln, dass Webdesigner sich damit befassen.

Ich hab's mit Javascript gut lösen können.

<input type="search" id="search" class="search_field" name="field_search" placeholder="Search ..." />
<a href="javascript:void(0)" class="glass">
<img src="images/glass.png" alt="search glass" />
</a>
<div id="suggestions"></div>

<script>
const data = [

{ name: "Google", url: "https://www.google.de" },
{ name: "YouTube", url: "https://www.youtube.com" },
{ name: "Wikipedia", url: "https://de.wikipedia.org" },
{ name: "GitHub", url: "https://github.com" }

];

const searchInput = document.getElementById("search");
const suggestions = document.getElementById("suggestions");

searchInput.addEventListener("input", function () {
const value = this.value.toLowerCase();

suggestions.innerHTML = "";

if (!value) {
suggestions.style.display = "none";
return;
}

const matches = data.filter(item =>
item.name.toLowerCase().includes(value)
);

matches.forEach(item => {
const link = document.createElement("a");
link.href = item.url;
link.textContent = item.name;
link.target = "_blank"; // öffnet in neuem Tab
link.style.display = "block";
link.style.padding = "10px";
link.style.textDecoration = "none";
link.style.color = "#333";
link.style.borderBottom = "1px solid #cccccc"

suggestions.appendChild(link);

});

suggestions.style.display = matches.length ? "block" : "none";
})
;</script>

Fall's sich Jemand interessieren sollte.

Beste Grüße

 

[SheepShaver]

@Christian_1987
Wenn du Webdesigner bist und kein JavaScript schreiben willst, dann ist Figma dein Werkzeug der Wahl.

Denn was du oben gepostet hast, ist nicht die einfachere Lösung, es ist die aufwendigere. addEventListener, filter, createElement, DOM-Aufbau per Hand, Styles inline pro Element. Das ist mehr als vier Zeilen im Terminal, die du als zu kompliziert abgelehnt hast.
Und es skaliert nicht. Vier feste Einträge in einem hartkodierten Array funktionieren immer. Bei 300 Begriffen baust du bei jedem Tastendruck hunderte DOM-Knoten neu auf, ohne Begrenzung der Trefferzahl, ohne Debounce. Dazu: kein Schließen bei Klick daneben, keine Tastaturbedienung, bei dynamischen Daten ein ungeprüftes href.

Wenn es von Anfang an nur ein Mockup mit einer Handvoll Einträgen werden sollte, hättest du das schreiben können. Dann hätte hier niemand über npm Libraries geredet.

 

[foofoobar]

Ansonsten ist Astro wahrscheinlich das einsteigerfreundlichste Framework.
https://astro.build/

Wie lange lebt dieses Zeug?

Wenn du Webdesigner bist und kein JavaScript schreiben willst, dann ist Figma dein Werkzeug der Wahl.

Wie lange lebt dieses Zeug?

 

[Christian_1987]

@Christian_1987
Wenn du Webdesigner bist und kein JavaScript schreiben willst, dann ist Figma dein Werkzeug der Wahl.

Denn was du oben gepostet hast, ist nicht die einfachere Lösung, es ist die aufwendigere. addEventListener, filter, createElement, DOM-Aufbau per Hand, Styles inline pro Element. Das ist mehr als vier Zeilen im Terminal, die du als zu kompliziert abgelehnt hast.
Und es skaliert nicht. Vier feste Einträge in einem hartkodierten Array funktionieren immer. Bei 300 Begriffen baust du bei jedem Tastendruck hunderte DOM-Knoten neu auf, ohne Begrenzung der Trefferzahl, ohne Debounce. Dazu: kein Schließen bei Klick daneben, keine Tastaturbedienung, bei dynamischen Daten ein ungeprüftes href.

Wenn es von Anfang an nur ein Mockup mit einer Handvoll Einträgen werden sollte, hättest du das schreiben können. Dann hätte hier niemand über npm Libraries geredet.

Kleiner Zwischenruf. Glaube ich, dass mein Account gehackt wurde. Da sich ein Rechtschreibfehler eingeschlichen hat, was mich wundert. Geschrieben habe ich eigentlich "Kenntnisse".


Zu deinem Text. Oh Gott. Ich weiß ja noch nicht mal was DOM bedeutet. Deshalb bin ich ja hier. Lach

Ergänzung (Dienstag um 08:55)

Wie lange lebt dieses Zeug?

Finde Figma absolut unseriös und meiner Ansicht nach ist das nur für Anfänger gedacht.

Grüße gehen raus.

 

[floq0r]

@SheepShaver Entweder du hast dir den typischen Duktus der KI zur Gewohnheit gemacht oder ich bin zwischenzeitlich paranoid

 

[SheepShaver]

@Christian_1987
So langsam machst du dich aber lächerlich. Figma ist seit ungefähr zehn Jahren das Standardwerkzeug für UI-Design. Adobe wollte 20 Milliarden dafür hinlegen und jedes größere Produktteam arbeitet damit.
Zwei Sätze vorher schreibst du dann noch, dass du nicht weißt was DOM heißt. Das Document Object Model ist die Basis von allem was im Browser passiert. Ohne das gibt es kein JavaScript, keine dynamische Seite, gar nichts. Steht in jedem Einführungskurs auf Seite 1.
Du kennst also weder Frontend-Grundlagen noch Design-Werkzeuge, fällst aber ein Urteil über beides. Das ist der Grund, warum der Thread so läuft wie er läuft.

@foofoobar
Figma ist ein Schwergewicht auf dem Markt. Das verschwindet so schnell nicht.
Astro gibt es jetzt seit 5 Jahren und gehört Cloudflare. Das ist kein kleines Hobbyprojekt, sondern ein Standard-Framework, das extrem oft eingesetzt wird.

@floq0r Ab und zu lass ich meine Foren-Posts nochmal durch die KI laufen, um sie auszuschmücken. Ist ne Angewohnheit, die ich mir von der Arbeit mitgebracht habe.

 

[Andarkan]

Steht in jedem Einführungskurs auf Seite 1.

Auf die Idee, so einen Einführungskurs einfach mal zu machen, kommt der TE natürlich nicht. Denn dann würde man es ja ernst meinen.

 

[Christian_1987]

@Christian_1987
So langsam machst du dich aber lächerlich. Figma ist seit ungefähr zehn Jahren das Standardwerkzeug für UI-Design. Adobe wollte 20 Milliarden dafür hinlegen und jedes größere Produktteam arbeitet damit.
Zwei Sätze vorher schreibst du dann noch, dass du nicht weißt was DOM heißt. Das Document Object Model ist die Basis von allem was im Browser passiert. Ohne das gibt es kein JavaScript, keine dynamische Seite, gar nichts. Steht in jedem Einführungskurs auf Seite 1.
Du kennst also weder Frontend-Grundlagen noch Design-Werkzeuge, fällst aber ein Urteil über beides. Das ist der Grund, warum der Thread so läuft wie er läuft.

Figma kannst du doch nicht mit Adobe Photoshop vergleichen.

Dom interessiert mich nicht ^^ und hat ganz sicher nichts mit Webdesign zu tun.

 

[SheepShaver]

Figma kannst du doch nicht mit Adobe Photoshop vergleichen.

Wo steht was von Photoshop.

Dom interessiert mich nicht ^^ und hat ganz sicher nichts mit Webdesign zu tun.

Dann stell keine Fragen im Programmier-Unterforum. JEDE Webseite basiert auf dem DOM. Wenn du Mockups erstellen willst, nutze ein entsprechendes Tool, wenn du eine Webseite erstellen willst, dann finde dich mit der Realität ab.

 

[Christian_1987]

@SheepShaver Also beim besten Willen, kann ich's mich nur schwer erklären, warum du dich so auf führst. Figma ist halt beliebt für einige Agenturen, mag sein. Aber ehrlich gesagt, kenne ich Niemanden der sich jemals mit Figma beschäftigt hat.

In Bezug auf DOM wiederhole ich mich: Ich habe einen anerkannten Titel als Mediengestalter und DOM war niemals ein Thema. Für "natütrlich" halte ich es nicht.

 

[User38]

Ich habe einen anerkannten Titel als Mediengestalter und DOM war niemals ein Thema. Für "natütrlich" halte ich es nicht.

Keine Sorge, solche Grundlagen wirst du nicht mehr lernen müssen - in spätestens 2 Jahren braucht dich niemand mehr und deinen Job macht Figma komplett selbstständig.