Frage <input> sofort ausführen??

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Amorrs

Neues Mitglied
24 Januar 2020
6
1
3
25
Guten Tag,
ich möchte gerne auf einer Webseite eine Suchfunktion einbauen.
Diese soll sobald der erste Buchstabe eingegeben wurde alle Container unterhalb einblenden die diesen Buchstaben enthalten mit dem nächsten Buchstaben dann noch weniger usw. bis der User den Container gefunden hat denn er will =) kann es nicht so gut erklären =) wenn das Suchfeld leer ist sollen alle Container eingeblendet sein... wie setze ich das um? also welche Sprache benötige ich? und evtl paar tipps zum start?

normalerweise suche ich mir immer Hilfe bei Google konnte aber dazu noch nix finden =)
vielen dank im voraus =)
 

Amorrs

Neues Mitglied
24 Januar 2020
6
1
3
25
Erstmal danke für deine Antwort.
Ich glaube ich habe es einfach schlecht erklärt.
Hier mal die Seite um die es geht da bin ich dran am bastel, ich weiß ist nicht perfekt und noch viel zutun =)
ich mache das Hobbymäßig in meiner Freizeit =)
mein ziel ist es nun sobald etwas in das Suchfeld eingetragen wird sollen nur die Kästen mit der passenden Gelben schrift bleiben ohne das ein Suchbutton benutzt werden muss und schon sobald der erste Buchstabe steht. z.B. man schreibt dort ein "a" rein soll alles verschwinden außer die Sachen mit "a" (ohne enter oder so zu drücken) schreibt man dann weiter noch ein "b" dazu also "ab" soll alles verschwinden außer die kästen mit "ab" in der gelben schrift usw.

vielen dank für die Hilfe =)
 

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
dann nimmst du ein keyup oder keydown event was auf den Textfeld reagiert.
Bei jeder Tastendruck läßt du eine Schleife laufen die alle Kästen durchgeht und nur den Inhalt der Gelben Schrift vergleichen tut.
Beim Treffer brauchst du ja nur die Kästen auf display:block oder none setzten.

EDIT:
Da du in deiner Seite 781 Boxen hast habe ich das mal vesucht wie ich es geschrieben habe.
Das geht auch .
Aber schneller geht es wenn du die Boxen mit der Gelben schrift , den classNamen und die position im dom in ein array schreiben tust.

Danach wird beim Tastendruck nur noch der array ausgelesen und geht schneller und bei meinen ältern Laptop sieht man auch das es wenniger Arbeitsspeicher fressen tut.

Dann solltest du den Container mit den boxen ein
display:flex
geben mit
flex-wrap:wrap
Weil so wie es jetzt ist reihen sich die Boxen nicht richtig ein wenn man die ein und wieder ausblenden tut.
 
Zuletzt bearbeitet:

Amorrs

Neues Mitglied
24 Januar 2020
6
1
3
25
okay vielen dank werde mich mal ran setzen und mich einlesen wie das mit dem array geht =) kann leider noch kein JS aber das kann ich ja lernen =)
 
  • Like
Reactions: Aaron3219

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
Da kann man dir aber mit ein paar Link aushelfen die du für den Code gebrauchen kannst.

Ich habe erst mit querySelectorall
alle Boxen eingelesen.
Beim einlesen den Inhalt ( Gelbe Schrift) aus den h4 geholt.

Dann könnte man array.push nehmen und alle Ergebnisse in den array speichern.

//---------------
Hier könnte man es vieleicht auch anders machen ( da hat jeder seine eigene Wege ).
Da ich ein Multiarray haben wollte mußte ich auch erst Googeln wie man das am besten mit push macht.
Vieleicht haben die anderen bei den Weg nee bessere Idee
//---------------

Wenn der array Fertig erstellt ist nimmt man ein ein key ( keyup ) Event.
Mit den Event liest du den Inhalt deines Textfeldes aus und vergleichst mit einer Schleife
den Inhalt der arrays mit den Tastenfeld.

//----------------
Hier habe ich beim Treffer ,oder nicht Treffer mit
Display block und none die Boxen ein und aus geblendet.
Mann könnte auch mit addclass und removeclass arbeiten , das macht vieleicht auch wieder jeder anders.
//-----------

Das ist mein Weg.
Vieleicht schmeißt hier noch einer verbesserungs Vorschläge im Raum oder einfachere Wege.
Ich würde aber bei der Menge an Boxen bei der Array Methode bleiben.
Bei 30 Boxen oder so wird man da nicht viele unterschiede merken, doch bei meinen Laptop merke ich da einen größeren unterschied.
 

Amorrs

Neues Mitglied
24 Januar 2020
6
1
3
25
Hii da bin ich nochmal die Links sind echt Gold wert danke.
Ich habe mir nun erstmal stunden Videos angeschaut (habe so einen video Kurs für JS) um erstmal paar Grundlagen zu bekommen und nun angefangen. doch stoße direkt auf ein Problem und finde keine Lösung oder bin zu doof die Lösung zu finden.

mein Code bisher:
"use strict"

window.addEventListener("load", function() {
let suchfeld = document.getElementById("suche_set");
suchfeld.addEventListener("click", function() {
let set_name = document.querySelectorAll("h4");
console.log(set_name);

so damit ließt er nun schon mal alle h4 überschriften aus, nun bin ich mir nicht sicher ob ich damit weiter arbeiten kann oder ob ich den Inhalt der h4 auslesen muss. Das bekomme ich einfach nicht hin hatte an .innerText gedacht aber klappt einfach nicht wenn ich
let set_name = document.querySelectorAll("h4.innerText"); //oder irgendeine andere Variation nehme.

habe dann versucht mit der NodeList weiter zu arbeiten und wollte wie du geschrieben hast diese in ein array packen

let setname = [];
setname.push(set_name);
console.log(setname.length);

das war der erste versuch aber er zeigt mir die array länge immer nur mit 1 an obwohl da ja 781 drin sein müssten...

ich weiß die Namensgebung ist nicht das gelbe vom ei und der Code ist sicher auch schlecht geschrieben aber ich bin noch ganz am Anfang also habt Nachsicht =)
ich habe auch das aktuelle wieder auf die Seite hochgeladen falls ihr zum schauen die html/css Struktur braucht.

Hier noch der gesamte JS so wie er gerade steht :

"use strict"
window.addEventListener("load", function() {
let suchfeld = document.getElementById("suche_set");
suchfeld.addEventListener("click", function() {
let set_name = document.querySelectorAll("h4");
console.log(set_name);
let setname = [];
setname.push(set_name);
console.log(setname.length);
}, false);
suchfeld.addEventListener("keyup", function() {
console.log("Test")
}, false);
suchfeld.addEventListener("change", function() {
console.log("Test")
}, false);
},);


für Hilfe und anstupser in die richtige Richtung wär ich dankbar
MfG Amorrs
 

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
Es kommt mir so vor das du es wirklich selber schaffen willst oder ?
Finde ich gut.

die h4 mit queryselector zu holen habe ich auch gemacht.
Aber so

JavaScript:
h=0;
var arrayynam = new Array();
box=document.querySelectorAll('.set_tooltip');
box.forEach(function(i){
    arrayynam.push([h, i.querySelector('h4').innerHTML,i.className]);
       h++;
});
Das habe ich gemacht weil ich einmal die box , und das h4 speichern wollte
Weiter unten habe ich gemerkt das ich das alles nicht gebraucht hätte.
Also würde ich den Teil dann so machen

JavaScript:
h=0;
var arrayynam = new Array();

box=document.querySelectorAll('.set_tooltip h4');
box.forEach(function(i){
    arrayynam.push([h, i.innerHTML]);
       h++;
});
das h ist die box die gezählt wurde von 0 bis 781.
i.innerHTML ist der Text der Gelben Schrift

jetztz sollte mit den Code
Code:
console.log(arrayynam.length);
console.log(arrayynam);
die Zahl 781 und
ne Menge Code in der Konsole stehen.

Könnte sein das ich irgendwo jetzt ein Tipp Fehler ( Im Code, sonst immer überall ) habe falls es nicht geht.
Muss den Fertigen Code erst wieder suchen habe vergessen wo ich den gespeichert habe.
Falls du damit Ergebnisse kriegst dann kannst du da weiter machen und dich jederzeit melden wenn du nicht weiter kommen tust.
EDIT:

Zum den anderen Code. ( Leute die mitlesen bitte meckern wenn die andere Meinung sind)
Ich würde das
Code:
window.addEventListener("load", function() {
hier dein Code
});
Mit das tauschen
JavaScript:
document.addEventListener('DOMContentLoaded',function () {
heier der Code
};
Das "use strict" würde ich weg lassen

Und hier
<script language="javascript" type="text/javascript" src="index.js"></script>

Kannst du den Mist weg lassen
language="javascript" type="text/javascript"
Der wird bei html5 nicht mehr gebraucht
 
Zuletzt bearbeitet:

Amorrs

Neues Mitglied
24 Januar 2020
6
1
3
25
hey, vielen dank für die Antwort.
Ich habe mich nun mal an deinem Code gehalten und versucht alles zu verstehen hätte da aber noch die ein oder andere frage ( ich möchte nicht einfach was hinschreiben wo ich nicht nachvollziehen kann warum oder was es macht)

Code:
h=0;
dort soll eine Variable erstellt werden? gibt es da einen Trick das da kein let oder var davor muss ? denn so funktioniert das bei mir nicht.
Und brauche ich die var h später noch denn ich habe im Code das alles so verstanden das wir die einfach dazu erstellen und dann in jedem array an stelle [0] das h sitzt welches hoch zählt und an stelle [1] steht die überschrift, aber ich verstehe nicht warum will ich das h mit hochzählen wenn ich das komplett weg lasse bekomme ich alle 781 arrays wo immer an stelle [0] der Name der box steht.

habe mich nun auch direkt daran versucht das als Mehrdimensionales Array darzustellen:

Code:
box.forEach(function(i) {
            arrayynam.push([[h], [i.innerHTML]]);
            h++;   
      });
schaut für mich richtig aus und hat auch soweit geklappt.
Sind nun in jedem Array nochmal 2 Arrays eins mit h und eins mit den namen.

und ich hatte bei mir ja das click Event mit dem Gedanken das diese ganze suche ja nur aktiviert werden muss wenn der User wirklich die suche nutzen möchte. Bin dort aber auf das Problem gestoßen das er ja immer wieder das gesamte Script ausführt sobald man in dem Feld rum klickt. meine Überlegung war eig. um Ressourcen zu sparen das ganze einmal zu laden sobald in das Feld geklickt wird und dann solange nicht mehr bis er die Seite neu lädt. is das einfach umsetzbar oder sollte ich besser einfach ohne die click Funktion arbeiten und das zu beginn einmal laden lassen?

ich werde mich nun mal weiter dran setzen und schauen was ich so zusam bekomme =)

vielen dank für die zeit die du dir nimmst ist echt nicht selbstverständlich
MfG Amorrs

Edit: okay direkt nach dem abschicken kam mir die Idee das es an use strict liegt das das mit dem h=0 ohne var oder let nicht geht =D den punkt habe ich nun verstanden.

Edit: Nochmal ein kleiner nachtrag.
Ich habe nun angefangen am Keyup event zu arbeiten hier der Code
Code:
      let suche_inhalt = "";
      suchfeld.addEventListener("keyup", function() {
            suche_inhalt = suche_inhalt + (event.key);
            console.log(suche_inhalt);
      }, false);
Die Idee war das eingegebene erstmal in einer var zu speichern um sie im nächsten schritt dann immer wieder auszulesen und zu vergleichen.
suche aber nun schon seit etwa 1 stunde wie ich es schaffen kann, dass Shift, Backspace usw. nicht in die var geschrieben werden sondern das wen Shift gedrückt wird in der var eine großer Buchstabe gespeichert wird und bei Backspace soll der Buchstabe gelöscht werden. Ich kann dazu leider nix finden
 
Zuletzt bearbeitet:

Fips

Neues Mitglied
22 Dezember 2019
5
0
3
36

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
schaut für mich richtig aus und hat auch soweit geklappt.
Sind nun in jedem Array nochmal 2 Arrays eins mit h und eins mit den namen.

Code:
box.forEach(function(i) {
            arrayynam.push([[h], [i.innerHTML]]);
            h++;  
      });
Der Code sollte dann vor den key Event laufen.
Da sich die Inhalte der Boxen sich nicht ändern ( ist ja kein Chat oder sowas ), reicht das man das einmal je Seitenbesuch in den Array einlesen tut.

Jetzt kommen wir zu den KeyEvent.

Code:
var was_wird_gesucht=document.getElementById('suche_set');
was_wird_gesucht.addEventListener('keyup',function(){
     console.log(was_wird_gesucht.value)
     //hier mus jetzt ein Schleife durch den Array laufen
});
Wenn du Groß und klein-schreibung nicht beachten willst ,könnte man mit
alles auf kleinschreibung umwandeln.( könnte man auch am Anfang vor den speichern im Array machen).

Beim vergleichen hilft dir das

Achte darauf was zurück kommt.
von -1 bis 781 kannst du Treffer bekommen.
Überlege dir wie die if Abfrage sein muß damit du Treffer und nicht Treffer erkennen tust

Ab hier bist du 95% fertig.
Wenn du Treffer und nicht Treffer erkannt hast müßen die Boxen nur noch ein und ausgeblendet werden

Ansonsten muß ich sagen RESPEKT !
Selten einer hier der soviel selber macht und lernen will
 

Amorrs

Neues Mitglied
24 Januar 2020
6
1
3
25
Hey ne is noch nicht fertig hatte die letze Woche leider recht wenig zeit und mache gerade erst den video Kurs noch stück weiter um das alles besser zu verstehen dort kommt auch if und else abfrage womit ich ja wahrscheinlich arbeiten muss.
ich werde hier auf jeden Fall wieder berichten wenn der Code weiter geht =)
Mfg Philipp
 
Werbung:

Latest posts