Frage zum Wiki-Artikel „Suchformulare“

[Hubert Burböck]

Hallo!

Ich möchte ein einfaches Suchformular auf einer HTML5-Seite erstellen, wo ich mit Klick auf "finden" eine gespeicherte PDF-Datei öffnen kann.

Habe folgendes Suchfolmular mit Überschriften für meine gespeicherten PDF-Dateien:

	<form action="#">
		<p>
			<label>
				Suchbegriff
				<input type="search" list="Inhalt">
				<datalist id="Inhalt">
					<option value="Text 01.PDF" >
					<option value="Text 02.PDF"> 
					<option value="Text 03.PDF"> 
					<option value="Text 04.PDF"> 
					<option value="Text 05.PDF"> 
					<option value="Text 06.PDF"> 
					<option value="Text 07.PDF">
					<option value="Text 08.PDF"> 
					<option value="Text 09.PDF"> 
					<option value="Text 10.PDF"> 
					<option value="Text 11.PDF"> 
				</datalist> 
			</label>
			<button>finden</button>
		</p>				
	</form>

Frage 1: Wie kann ich meine PDF-Dateien den Überschriften zuordnen?

Frage 2: Was muss ich bei <form action="#"> eingeben, damit ich bei Klick auf "finden" die jeweilige PDF-Datei öffnen kann?

Ich würde mich sehr freuen, wenn dies ohne PHP möglich wäre. Mit freundlichen Grüßen Hubert

[marctrix]

Guten Morgen Hubert,

Ich möchte ein einfaches Suchformular auf einer HTML5-Seite erstellen, wo ich mit Klick auf "finden" eine gespeicherte PDF-Datei öffnen kann.

Ich habe das Gefühl, du willst eigentlich etwas anderes. Dazu unten mehr.

Habe folgendes Suchfolmular mit Überschriften für meine gespeicherten PDF-Dateien:

  <form action="#">
  	<p>
  		<label>
  			Suchbegriff
  			<input type="search" list="Inhalt">
  			<datalist id="Inhalt">
  				<option value="Text 01.PDF" >
  				<option value="Text 02.PDF"> 
  				<option value="Text 03.PDF"> 
  				<option value="Text 04.PDF"> 
  				<option value="Text 05.PDF"> 
  				<option value="Text 06.PDF"> 
  				<option value="Text 07.PDF">
  				<option value="Text 08.PDF"> 
  				<option value="Text 09.PDF"> 
  				<option value="Text 10.PDF"> 
  				<option value="Text 11.PDF"> 
  			</datalist> 
  		</label>
  		<button>finden</button>
  	</p>				
  </form>

Auch wenn du ein <input type="search"> verwendest, ist das kein Suchformular.

In ein Sucheingabefeld kann man beliebige Worte eingeben und bekommt dann eine Liste mit Treffern wieder. Diese Trefferliste enthält dann nur die Dokumente, in welchen der gesuchte Begriff gefunden wurde, also vermutlich nicht alle 11 PDF-Dokumente.

Frage 1: Wie kann ich meine PDF-Dateien den Überschriften zuordnen?

Ich sehe keine Überschriften, daher verstehe ich nicht, was du meinst.

Frage 2: Was muss ich bei <form action="#"> eingeben, damit ich bei Klick auf "finden" die jeweilige PDF-Datei öffnen kann?

Welche ist denn die jeweilige?

Eine die man erst ausgewählt hat?

Ich würde mich sehr freuen, wenn dies ohne PHP möglich wäre.

Dann mache ich Dir einen Vorschlag aufgrund der folgenden Annahme:

Vermutlich möchtest du keine Suche, sondern du hast eine Liste von PDF-Dokumenten, die der Nutzer öffnen können soll.

Verwende dafür doch einfach eine Liste von Links. Das hat mehrere Vorteile: man sieht sofort alle verfügbaren Dokumente und spart sich Klicks und Scrollen, statt eine Drop-Downs-Liste erst zu öffnen, dann (u.U. mit Scrollen) dadurch zu navigieren, zusätzlich vielleicht die Menge durch Eingabe eines Textes einzuschränken, dann einen Eintrag auszuwählen und zuletzt auch noch auf einen Button zu klicken, klickt man einfach auf den entsprechenden Link und gut ist.

Wenn du Platz sparen willst oder musst, kannst du die Liste mit dem details-Element zuklappen.

Marc

[pl]

hi

Ich möchte ein einfaches Suchformular auf einer HTML5-Seite erstellen, wo ich mit Klick auf "finden" eine gespeicherte PDF-Datei öffnen kann.

Ich habe das Gefühl, du willst eigentlich etwas anderes. Dazu unten mehr.

Die Frage des OP bezieht sich auf den Wiki~Artikel und nicht auf Deine Gefühle!

Auch wenn du ein <input type="search"> verwendest, ist das kein Suchformular.

So stehts aber im Wikiartikel.

MfG

[marctrix]

Hej pl,

Ich möchte ein einfaches Suchformular auf einer HTML5-Seite erstellen, wo ich mit Klick auf "finden" eine gespeicherte PDF-Datei öffnen kann.

Ich habe das Gefühl, du willst eigentlich etwas anderes. Dazu unten mehr.

Die Frage des OP bezieht sich auf den Wiki~Artikel und nicht auf Deine Gefühle!

Ach hättest du den Artikel doch mal gelesen, pl…

Auch wenn du ein <input type="search"> verwendest, ist das kein Suchformular.

So stehts aber im Wikiartikel.

Nein. Erst lesen, dann denken, dann schreiben.

Im Wiki-Artikel ist eine datalist verwendet worden, um Rechtschreibfehlern vorzubeugen, häufige Suchbegriffe proaktiv anzubieten o.ä. Im Beispiel, das der OP gezeigt hat, sind URLs zu sehen, die nach erst nach einem unnötigen zusätzlichen Klick vom Nutzer geöffnet werden können.

Marc

[Hubert Burböck]

Hallo, ich denke, ich habeme nicht deutlich ausgedrückt.

Es geht bei der Sache um Folgendes:

Auf meiner Webseite stehen mehr als 50 PDF's zum anklicken bereit. Um eine einfachere Sortierung der schon etwas unübersichtlichen Seite zu bewerkstelligen (Beispielsweise nach Schulstufen o.Ä.), hätte ich mir gerne ein Suchfeld eingerichtet, wo die Besucher dieser Seite mit Eingabe einiger Buchstaben oder Zahlen eine schnellere Auswahl treffen können. Hier ein Screenshot von einem Teil dieser Seite:

Dafür schien mir das Script mit der datalist geeignet. Leider kann ich damit meine PDF's nicht auswählen. Gibt es dafür eine Möglichkeit? MlG. Hubert

[Gunnar Bittersmann]

@@Hubert Burböck

Auf meiner Webseite stehen mehr als 50 PDF's zum anklicken bereit. Um eine einfachere Sortierung der schon etwas unübersichtlichen Seite zu bewerkstelligen (Beispielsweise nach Schulstufen o.Ä.), hätte ich mir gerne ein Suchfeld eingerichtet, wo die Besucher dieser Seite mit Eingabe einiger Buchstaben oder Zahlen eine schnellere Auswahl treffen können.

Ich werd daraus nicht schlau.

Sortierung: Du sortierst die Inhalte nach einem bestimmten Kriterium. Oder auch nach mehreren Kriterien und bietest dem Nutzer an, zwischen verschiedenen Sortierungen zu wählen – wie sie es gerade braucht.

Suche: keine Sortierung, der Nutzer gibt Suchbegriffe ein und erhält eine Liste von Suchtreffern.

Beides ist etwas ganz unterschiedliches. Was möchtest du?

Mir fällt hierzu gerade der Tweet von Jesse James Garrett ein:

“I remain amazed and perplexed at how often people think they can solve an information architecture problem with interaction design.”

LLAP 🖖

[Hubert Burböck]

Danke für die Infos.

Einfach ausgedrückt will ich den Besuchern der Website das scrollen ersparen und ihnen mit Klick auf das Suchfeld eine einfache Auswahl aller PDF-Files ermöglichen.

[Gunnar Bittersmann]

@@Hubert Burböck

Einfach ausgedrückt will ich den Besuchern der Website das scrollen ersparen

Scrollen ist eine einfache Aktion. Scrollen ersparen ist nicht sinnvoll, wenn dann eine schwierigere Nutzeraktion erforderlich wird.

und ihnen mit Klick auf das Suchfeld eine einfache Auswahl aller PDF-Files ermöglichen.

Was ist für Nutzer einfacher: aus einer Liste auszuwählen oder zu überlegen, wonach sie suchen müssen?

Kennen die Nutzer denn (zumindest in groben Zügen) den Umfang deines Website-Inhalts?

Kennen sie die Begriffe, wonach sie suchen müssten?

Oder willst du gar kein Suchfeld, sondern ein Aufklappmenü? Und wenn ja, warum? Warum sollte das Menü nicht gleich aufgeklappt sein?

LLAP 🖖

[marctrix]

Hej Hubert,

Es geht bei der Sache um Folgendes:

Auf meiner Webseite stehen mehr als 50 PDF's zum anklicken bereit. Um eine einfachere Sortierung der schon etwas unübersichtlichen Seite zu bewerkstelligen (Beispielsweise nach Schulstufen o.Ä.), hätte ich mir gerne ein Suchfeld eingerichtet, wo die Besucher dieser Seite mit Eingabe einiger Buchstaben oder Zahlen eine schnellere Auswahl treffen können.

Gibt es dafür eine Möglichkeit?

Es gibt eine Lösung für das Problem mit einer jQuery-Tabelle, die weitgehend vernünftig nutzbar ist:

DataTables - Table plugin for jQuery

Das wäre dann sinnvoll, wenn du zu den Einzelnen Büchern wirklich tabellarische Daten lieferst, also Titel, Schulstufe usw, dann ließe sich nicht nur nach den entsprechenden Spalten sortieren, sondern auch mittels dem Suchfeld darüber die Menge der angezeigten Datensätze einschränken.

Allerdings scheint jQuery aus guten Gründen auf dem Rückmarsch zu sein.

Da dieses Projekt zu leben scheint, ist eine Umsetzung in reinem JavaScript nicht ausgeschlossen — besonders nciht, wenn Nutzer das einfordern. 😉

Marc

PS: interessante Titel hast du da. Ist die Seite öffentlich zugänglich? — Wäre Schade, wenn nicht…

[Hubert Burböck]

Diese Seite ist für Mitglieder des Vereins zur Förderung legasthener und unter erschwerten Bedingungen lernender Menschen bestimmt. Leider nicht öffentlich zugängig.

[ZUGANGSDATEN gelöscht]

Vielleicht kannst du mir ein JavaScript für diese Anwendung zeigen, wäre toll.

Bitte Sorgsam mit den Zugangsdaten umgehen, Danke. MfG. Hubert

[marctrix]

Hej Hubert,

Diese Seite ist für Mitglieder des Vereins zur Förderung legasthener und unter erschwerten Bedingungen lernender Menschen bestimmt. Leider nicht öffentlich zugängig.

http://www.lrs-legasthenie.at/verein.html

Vielleicht kannst du mir ein JavaScript für diese Anwendung zeigen, wäre toll.

Auf der verlinkten Seite ist alles erklärt.

Bitte Sorgsam mit den Zugangsdaten umgehen, Danke.

Das ist total nett, aber das ist hier ein öffentliches Forum! - Bitte ändere die Daten umgehend, denn jetzt kennt sie jeder. Ich kann die Zahnpasta auch nicht zurück in die Tube drücken!

Ich würde die Seite gerne verlinken, wenn sie nicht öffentlich zugänglich ist, geht das natürlich nicht.

Marc

[marctrix]

Hej Hubert,

Diese Seite ist für Mitglieder des Vereins zur Förderung legasthener und unter erschwerten Bedingungen lernender Menschen bestimmt. Leider nicht öffentlich zugängig.

[ZUGANGSDATEN gelöscht]

Vielleicht kannst du mir ein JavaScript für diese Anwendung zeigen, wäre toll.

Bitte Sorgsam mit den Zugangsdaten umgehen, Danke.

Ich habe diese gelöscht! — So was kannst du doch nicht in einem öffentlichen Forum posten… 😉

Marc

[Hubert Burböck]

OK, DANKE!

[marctrix]

Hej Hubert,

OK, DANKE!

Keine Ursache, ich hatte aber Hilfe.

Marc

[Matthias Apsel]

Hallo marctrix,

Keine Ursache, ich hatte aber Hilfe.

Der Christian wars.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Keine Ursache, ich hatte aber Hilfe.

Der Christian wars.

Ja, habe den in meiner Panik alarmiert... 😂

Marc

[Matthias Apsel]

Hallo marctrix,

Ich habe diese gelöscht!

Nein. - Nur Admins können entgültig löschen.

— So was kannst du doch nicht in einem öffentlichen Forum posten… 😉

Aber sowas von!

Bitte ändere die Zugangsdaten umgehend. Aber ich hätte auch gern Zugangsdaten, Legasthenie ist ein wichtiges Thema.

Bis demnächst
Matthias

[Henry]

Hallo Hubert,

Vielleicht kannst du mir ein JavaScript für diese Anwendung zeigen, wäre toll.

Ich habe das Beispiel mal versucht auf deine Bedürfnisse anzupassen. Aber noch nicht ganz fertig, muss mal überlegen wie onchange in etwas ähnlichem wie onselect ändere, weil jetzt zeigt er das pdf erst an wenn du aus dem Feld wieder raus gehst. Aber probier mal, wenn's das ist was du willst, mach ich oder jemand anders hier sicher weiter.

<main>

<script>
function urlist(v)
{
document.getElementById('pdf').innerHTML=v+'.pdf';
document.getElementById('pdf').href=v+'.pdf';
}
</script>

	<form action="#">
		<p>
			<label> Vogelart<input type="search" list="Vögel" onchange="urlist(this.value);" />
				<datalist id="Vögel">
					<option value="Amsel">
						<option value="Buntspecht">
							<option value="Drossel">
								<option value="Eisvogel">
									<option value="Fink">
										<option value="Graugans">
											<option value="Meise">
												<option value="Spatz">
													<option value="Specht">
				</datalist>
			</label>
			<button>finden!</button>
		</p>
	</form>
	
<a id="pdf" href=""></a>	
</main>

*Nachtrag
Du hattest ja schon ein Beispiel(vergessen) dann natürlich ohne die Erweiterung (.pdf).

<script>
function urlist(v)
{
document.getElementById('pdf').innerHTML=v;
document.getElementById('pdf').href=v;
}
</script>

Gruss
Henry

[JürgenB]

Hallo,

onchange

würde hier nicht das input-Event greifen?

Gruß
Jürgen

[Henry]

Hallo JürgenB,

Du meinst zb. onclick? Leider nein.

Gruss
Henry

[Christian Kruse]

Hallo Henry,

Du meinst zb. onclick? Leider nein.

Nein, input.

LG,
CK

[Henry]

Hallo Christian,

Nein, input.

wusste gar nicht, dass es das gibt 😉 Schön, dass man nie auslernt, danke.

@JürgenB

Vollkommen richtig, funktioniert, danke.

also

<label> Vogelart<input type="search" list="Vögel" oninput="urlist(this.value);" />

Gruss
Henry

[marctrix]

Hej Henry,

Ich habe das Beispiel mal versucht auf deine Bedürfnisse anzupassen.

Das ist auch eine schöne Idee, vor allem schlank!

Marc

[Hubert Burböck]

Vielen, vielen DANK euch ALLEN!!!

Mit diesem JavScript komme ich super zurecht. Selbst wäre ich nie draufgekommen.

Mit freundlichen Grüßen Hubert

[Henry]

Nachtrag,

ich habe dein Beispiel mal zum Testen online gebracht. (auf RUN klicken)

Übrigens, nur zur Info, wenn die Dateinamen wirklich zb. "Text 05.PDF" lauten ist das keine gute Idee, sind Leerzeichen im Dateinamen nie, kommt nicht jedes System mit zurecht.

Gruss
Henry

[beatovich]

hallo

ich habe dein Beispiel mal zum Testen online gebracht. (auf RUN klicken)

ACHTUNG

gib mal

javascript:alert("hi")

ein und klicke den Link

[Henry]

Hallo beatovich,

ACHTUNG

gib mal

javascript:alert("hi")

ein und klicke den Link

Und? Ist schließlich nur clientseitig, oder meinst du was anderes?

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

Und? Ist schließlich nur clientseitig, oder meinst du was anderes?

Du hast den Kontextwechsel nicht beachtet.

Bis demnächst
Matthias

[beatovich]

hallo

Und? Ist schließlich nur clientseitig, oder meinst du was anderes?

Du hast den Kontextwechsel nicht beachtet.

innerText statt innerHTML ist sauber.

Allerdings beseitigt es nicht das Problem.

[marctrix]

Hej Hubert,

Zurück zum Thema:

Vielleicht kannst du mir ein JavaScript für diese Anwendung zeigen, wäre toll.

Das ist auf der Seite alles erklärt. Was immer geht: markiere den gesamten Quelltext von einem Beispiel und kopier dir das in einen Editor. Dann fügst du Deine eigenen Inhalte ein und löschst den ganzen Beispielkram, so dass am Ende eine Seite mit Deinen Inhalten entstanden ist.

Wenn du gut genug englisch verstehst, ist es aber ratsam die gute Doku zu lesen.

Wenn das nicht geht: ich würde das Beispiel ohne presentational classes empfehlen, also ein recht einfach gehaltenes, das umso leichter an Dein eigenes Design anpassbar ist — falls nötig.

Marc

[Hubert Burböck]

Hej Marc,

Die Umsetzung wird ein wenig dauern, muss erst meine PDF's umbenennen, denn Umlaute und Leerzeichen sind immer ein Problem.

Danke nochmals Hubert

[Hubert Burböck]

Hej Marc,

habe nun einen Teil umgesetzt. Funktioniert im Firefoc, im Chrome und auch im IE1 prima. Leider zeigt der EDGE kein PDF an. Habe ich noch etwas vergessen?

		<form action="#">
			<p>
			<label>
			Suchbegriff
			<input type="search"  id="search" list="Lesen" oninput="urlist(this.value);" />
				<datalist id="Lesen">
				<option value="Mgl/Niederschlaege">
				<option value="Mgl/Lesetext_Steinzeit"> 
				<option value="Mgl/Wuestenhitze"> 
				<option value="Mgl/Lesetext_Schwarze_Loecher"> 
				<option value="Mgl/Lesetext_Spinnen"> 
				<option value="Mgl/Lesewoerter_Mathematik_4"> 
				<option value="Mgl/Silbenkarten_Mensch_aergere_dich_nicht">
				<option value="Mgl/Lesetext_Das_Rentier_4-5"> 
				<option value="Mgl/Lesetext_Der_Elch_4-5"> 
				<option value="Mgl/Lesetext_Der_Eisbaer_6-7"> 
				<option value="Mgl/Lesetext_Der_Polarfuchs_6-7"> 
				</datalist> 
			</label>
			<button>finden</button>
			</p>				
		</form>
		<br/>
		
			<script>
				function urlist(v)
				{
				document.getElementById('pdf').innerHTML=v+'.pdf';
				document.getElementById('pdf').href=v+'.pdf';
				}
			</script>
		<br/>
			<h2><a id="pdf" href="" target="_blank"></a><h2>	

[beatovich]

hallo

  		<script>
  			function urlist(v)
  			{
  			document.getElementById('pdf').innerHTML=v+'.pdf';

korrigieren zu:

document.getElementById('pdf').innerText = v+'.pdf';

  			document.getElementById('pdf').href=v+'.pdf';

korrigieren zu

document.getElementById('pdf').href= "/" + v+'.pdf';

der vorangestellte Slash verhindert, dass die Eingabe "javascript:alert('hi')" ausgeführt wird. Das kann aber den Pfad ändern.

  			}
  		</script>
  	<br/>
  		<h2><a id="pdf" href="" target="_blank"></a><h2>	

[Hubert Burböck]

document.getElementById('pdf').href= "/" + v+'.pdf';

der vorangestellte Slash verhindert, dass die Eingabe "javascript:alert('hi')" ausgeführt wird. Das kann aber den Pfad ändern.

Danke! Den Slash habe ich weggelassen nun funktioniert alles auch beim EDGE.

Habe diese Seite als Testseite auf unserer Homepage freigegeben. Könnt sie ruhig ausprobieren.

http://www.lrs-legasthenie.at/MGLtest/lesen.html

Hubert

P.S.: Es macht richtig Spaß, mit euch in diesem Forum zusammenzuarbeiten.

[Henry]

grrr… also manchmal nervt's echt. Wieder alles neu schreiben, weil wieder mal alles weg.

Hallo Hubert,

das davor betrifft dich nicht, geht darum, dass ich hier oft was schreibe und dann irgendwo an falscher Stelle rankomme, dann ist der Eintrag weg.

Ok, also auf ein Neues.

http://www.lrs-legasthenie.at/MGLtest/lesen.html

Was da noch ein wenig verwirrend sein kann, ist dass man bei der Eingabe bereits einen Link erzeugt, der ja auf ein Dokument zeigen kann was gar nicht vorhanden ist. Daher hier noch als optionale Ergänzung und gleichzeitiger Prüfung der Dateiliste(Nur wenn dort vorhanden wird Link erzeugt):

 <script>
    function urlist(v)
    {

      var dataobj = document.getElementById('Lesen');
      var data_ar = dataobj.getElementsByTagName('option')
      var anzahl = data_ar.length;
      
      var i;
      for ( i=0; i<=anzahl; i++ ) {
      if(data_ar[i].value == v){var chk_ok = 1;break;}
      }
      
      if(chk_ok)
      {
      document.getElementById('pdf').innerText=v+'.pdf';
      document.getElementById('pdf').href=v+'.pdf';
      }else{return false;}
      
    }
  </script>

@beatovich

Damit dürfte sich dann auch dein Einwand erledigt haben, obwohl ich immer noch nicht genau weiß, wo drauf du hinaus wolltest, bzw. was du da für eine Gefährdung siehst. Andere Sache, warum Edge nicht mit innerHTML hierbei zurecht kommt... keine Ahnung. Aber da du ja auch innerText für gravierend wichtig hierbei hältst, kannst du viell. was dazu erzählen?

---

Dann hätte ich noch eine eigene Frage:

Bei der Funktion fiel mir ein seltsames Verhalten auf, dass ich mir nicht erklären kann. Denn das Ganze funktioniert(eigentlich auch nicht, erkläre ich noch) auch ohne die IF also chk_ok und if(chk_ok) .

<script>
    function urlist(v)
    {

      var dataobj = document.getElementById('Lesen');
      var data_ar = dataobj.getElementsByTagName('option')
      var anzahl = data_ar.length;
      
      var i;
      for ( i=0; i<=anzahl; i++ ) {
      if(data_ar[i].value == v){break;}
      }

      document.getElementById('pdf').innerText=v+'.pdf';
      document.getElementById('pdf').href=v+'.pdf';   
    }
  </script>

1. Warum funktionierts richtig auch ohne IF?

2. Warum funktioniert gar nichts ohne break;

aber... in beiden Fällen nur, wenn ich break; nutze. Sonst wird nach der Schleife gar nichts ausgeführt. Jetzt kann ich nicht nachvollziehen, warum die Schleife nebenbei als Kontrollstruktur agiert. Hat doch normalerweise keinen Einfluss auf das was nach der Schleife funktioniert?

Gruss
Henry

[beatovich]

hallo

@beatovich

Damit dürfte sich dann auch dein Einwand erledigt haben, obwohl ich immer noch nicht genau weiß, wo drauf du hinaus wolltest, bzw. was du da für eine Gefährdung siehst. Andere Sache, warum Edge nicht mit innerHTML hierbei zurecht kommt... keine Ahnung. Aber da du ja auch innerText für gravierend wichtig hierbei hältst, kannst du viell. was dazu erzählen?

Es ist eine prinzipiell Geschichte. Wir können uns zwar damit entschuldigen, dass ja hier nur eine URL gebaut und dann sofort angewendet wird.

Was aber wenn man sich derlei angewöhnt, und dann eine solche URL nicht sofort anwendet, sondern gar für andere User speichert?

[Henry]

Hallo beatovich,

Was aber wenn man sich derlei angewöhnt, und dann eine solche URL nicht sofort anwendet, sondern gar für andere User speichert?

Dann wäre es immer gefährlich, schließlich lässt sich der Quellcode bzw. DOM ja ändern. Nein, dann muss ich leider sagen, doch nicht so relevant, weil, wie schon gesagt, clientseitig. Dein Beispiel, andere User speichern..., wäre eine serverseitige Lösung nicht nur anzuraten, sondern Pflicht.

Tja und was war jetzt mit innerHTML/Text? Habe übrigens gerade mal mit Edge getestet, liegt wohl eher an anderen Sachen, weil funktioniert mal so gar nicht, auch nicht innerText, kurios.

Gruss
Henry

[beatovich]

hallo

Dann wäre es immer gefährlich, schließlich lässt sich der Quellcode bzw. DOM ja ändern. Nein, dann muss ich leider sagen, doch nicht so relevant, weil, wie schon gesagt, clientseitig. Dein Beispiel, andere User speichern..., wäre eine serverseitige Lösung nicht nur anzuraten, sondern Pflicht.

Es ist ein Unterschied, ob jemand im DOM explizit rumrödelt, oder ob ich Leitplanken abbaue und es ihm so ungewollt zumute.

[Henry]

Hallo beatovich,

Es ist ein Unterschied, ob jemand im DOM explizit rumrödelt, oder ob ich Leitplanken abbaue und es ihm so ungewollt zumute.

Wenn jemand so was(ähnliches) wie dein Beispiel javascript:alert("hi") eingibt, dann fällt mir schwer das als "ungewollt" anzuerkennen. Hättest du ein realistischeres Gefährdungbeispiel?

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

Tja und was war jetzt mit innerHTML/Text?

<p>innertext: <span id=innertext></span></p>

<p>innerhtml: <span id=innerhtml></span></p>

document.querySelector("#innertext").innerText = "<a href=\"https://example.com\">Link</a>";

document.querySelector("#innerhtml").innerHTML = "<a href=\"https://example.com\">Link</a>";

ergibt?

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

document.querySelector("#innertext").innerText = "<a href=\"https://example.com\">Link</a>";

document.querySelector("#innerhtml").innerHTML = "<a href=\"https://example.com\">Link</a>";

ergibt?

hmm… (nur mal neugierig)

warum macht ihr das nur immer mit dem escapen anstatt

innerText = '<a href="https://example.com">Link</a>"';

—

Aber zu deiner Frage, ergibt:

<p>innertext: <span id="innertext">&lt;a href="https://example.com"&gt;Link&lt;/a&gt;</span></p>

<p>innerhtml: <span id="innerhtml"><a href="https://example.com">Link</a></span></p>

Auch klar, dass hier zu nutzen wahrscheinlich sinnvoller ist. Manchmal ist aber auch die Umsetzung von HTML durchaus erwünscht, von daher nehme ich eigentlich immer die gröbere Version, denn: Irgendwann einmal, weiß nicht mehr wann und warum, hatte ich mal ein Problem durch innerText, viell. fällt's mir wieder mal ein, dann reiche ich es nach.

Gruss
Henry

[beatovich]

hallo

Auch klar, dass hier zu nutzen wahrscheinlich sinnvoller ist. Manchmal ist aber auch die Umsetzung von HTML durchaus erwünscht, von daher nehme ich eigentlich immer die gröbere Version, denn: Irgendwann einmal, weiß nicht mehr wann und warum, hatte ich mal ein Problem durch innerText, viell. fällt's mir wieder mal ein, dann reiche ich es nach.

HTML soll man nur dann erzeugen, wenn man die Data unter eigener Kontrolle hat.

In einem anderen Thread musste ich auch dazulernen bezüglich DATA in <script>

statt innerText gibts auch.

var text = element.textContent;
element.textContent = "this is some sample text";

und innerHTML ist auch nicht toll.

el.innerHTML="bitte <button>drücken</button>";

Und jetzt registriere einen Listener für eben diesen button.

[Henry]

*edit,

warum macht ihr das nur immer mit dem escapen anstatt

innerText = '<a href="https://example.com">Link</a>"';

einmal " zuviel, so natürlich:

innerText = '<a href="https://example.com">Link</a>';

Gruss
Henry

[dedlfix]

Tach!

      var anzahl = data_ar.length;
      
      var i;
      for ( i=0; i<=anzahl; i++ ) {
      if(data_ar[i].value == v){break;}
      }

Wenn du 3 Elemente in einem Array hast, das mit 0 beginnend nummeriert wird, dann sind die Keys: 0, 1, 2. anzahl ist 3 und damit 1 größer als der größte Key. Wenn du durchläufst, dann bis vor den Wert von anzahl: i < anzahl.

Besser ist es, ohne die Hilfsvariable i auszukommen. Array hat die Methode forEach(). Dummerweise ist data_ar aber gar kein Array, sondern nur eine HTMLCollection. Was die Key-Nummerierung angeht, stimmt die mit Arrays überein, aber es fehlen die Methoden, die das Array-Objekt mitbringt. Deshalb muss man sie erstmal in ein Array umformen, was mit Array.from() geht.

Array.from(data_ar).forEach(value => ...);

Eigentlich möchtest du gar nicht über das Array / die HTMLCollection iterieren, sondern nur wissen, ob ein bestimmter Wert enthalten ist. Das kann man eleganter lösen. Dabei gibt es aber das Problem, dass der gesuchte Wert in einer Eigenschaft der HTMLCollection-Elemente steckt, und da erstmal extrahiert werden muss. Zunächst erfolgt die Konvertierung in ein Array, dann erzeugen wir mit .map() eine Liste der Values. .map() konvertiert die Werte eines Arrays in andere Werte. Das Konvertieren übernimmt die übergebene Funktion für jeweils einen Wert.

Array.from(data_ar).map(option => option.value)

oder in herkömmlich ausführlich:

Array.from(data_ar).map(function (option) {
 return option.value;
});

Und dann kann .includes() herausfinden, ob der gesuchte Wert vorhanden ist.

Array.from(data_ar).map(option => option.value).includes(v);

(Wenn man nicht auf den IE und andere Altbrowser (ESR-Varianten) verzichten kann, braucht es für .from() und .inludes() noch ein Polyfill.)

Rückgabewert dieses Konstrukts ist jedenfalls true oder false, was dann mit if ausgewertet werden kann.

data_arr müsste auch mal einen ordentlichen Namen bekommen, beispielsweise options, denn solche sind es ja.

aber... in beiden Fällen nur, wenn ich break; nutze. Sonst wird nach der Schleife gar nichts ausgeführt.

Da wird es wohl eine Fehlermeldung geben, die zum Abbruch führt. Wenn du auf Eigenschaften von Elementen zugreifst, die nicht existieren, dann greifst du auf Eigenschaften von undefined zu, und das hat keine.

dedlfix.

[Orlok]

Hallo dedlfix

Noch anzumerken wäre, dass der explizite Aufruf von map an dieser Stelle überflüssig ist, da die Funktion auch direkt an from übergeben werden kann:

Array.from(options, option => option.value).includes(value)

Viele Grüße,

Orlok

[Henry]

Hallo dedlfix,

…und damit 1 größer als der größte Key…

Och nö… Wald vor Bäumen. Klar, for ( i=0; i<=anzahl-1; i++ ) { so geht's natürlich, danke dir.

Auf forEach habe ich bewusst verzichtet, wegen IE. Auch die anderen Sachen (danke für die Mühe) sind richtig, wollte es aber so einfach wie möglich halten, weil mir nur der Gedankengang wichtig war, letztendlich bevor nun Funktionen wie map zum Einsatz und Array-Konvertierungen kommen sollen, wäre es nur komplexer, was hier aber nicht wirklich Sinn macht, weil eine serverseitige Lösung besser wäre.

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Auf forEach habe ich bewusst verzichtet, wegen IE.

Laut Can I Use unterstützt IE forEach bereits ab Version 9. IE 8 und darunter – ernsthaft jetzt?

LLAP 🖖

[Henry]

Hallo Gunnar,

Laut Can I Use unterstützt IE forEach bereits ab Version 9. IE 8 und darunter – ernsthaft jetzt?

Ja und, ich benutze halt gern IE7 😜 😉 Nein, im Ernst, hatte das so nicht auf dem Schirm, weil IE ja auch keine NodeLists unterstützt, wär ich nicht drauf gekommen, dass er sich da dann moderner zeigen würde. Danke für den Hinweis.

Gruss
Henry

[Rolf B]

Hallo Hubert,

die bisher diskutierte Lösung, die einen Link erzeugt, funktioniert sicherlich. Ich möchte Dir aber auch noch eine Alternative vorstellen, die einfach die existierende PDF Liste filtert. Das setzt voraus, dass die PDFs im HTML als Text vorliegen. Falls die PDF-Liste aus Bildern besteht, müsstest Du die Filterbegriffe in den alt-Attributen der Bilder suchen (alt-Attribute hast Du für Bilder doch, nicht wahr?)

Mein jsFiddle-Beispiel verwendet eine mit display:grid aufgebaute Dokumentenübersicht und hat obendrüber ein Eingabefeld. Tippt man da was ein, bleiben nur die Felder übrig die auf die Eingabe passen. Ich habe mir jetzt keine Mühe gegeben, die Texte im Grid vertikal zu zentrieren...

Das HTML sieht so aus:

<h2>
Rechtschreiben üben
</h2>
<label>Filter: <input id="filter" type="search"></label>
<ul id="themen">
<li>
  <header><span class="stufe">2.-10.</span></header>
  <a href="#">Die 300 häufigsten Fehlerwörter</a>
</li>
<li>
  <header><span class="stufe">2.-10.</span></header>
  <a href="#">Doppelkonsonanten,<br>tz &amp; ck</a>
</li>
<!-- etc etc etc -->
</ul>

Den Header habe ich eingebaut, um deine Kopfzeilen pro Bild zu simulieren. Den Kreis und das Wort neben dem Kreis (das ich im Screenshot nicht entziffern konnte) bringe ich mit CSS hinein. Das Schultafel-Bild würde man als entsprechend positionierten background dem Header hinzufügen.

Die Liste wird mit CSS als responsives Grid gestyled - kann man machen, es gibt auch Alternativen.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(15em, 1fr));
}

li {
  list-style:none;
  margin: 0.3em;
  border-radius: 1em;
  overflow:hidden;
 }

li header {
  background-color: #ff8;
}
li header .stufe {
  display: inline-block; 
  border: 2px solid #844; background-color: #cff;
  border-radius: 1em;
  padding: 0.2em; margin: 0.1em;
  font-size: 1.2rem;
}
li header:after {
  content: " Lernstufe";
  font-size: 0.7rem;
}
li a {
  display: block;
  box-sizing: border-box; 
  width: 100%; height: 5em; padding: 0.5em 1em;
  text-align: center; 
  text-decoration:none;
  background-color: #ffc;
}

li.hidden {
  display:none;
}

Wichtig ist die letzte Regel, die wird zum Ausblenden der Nichttreffer gebraucht.

Das Script ist dann relativ einfach. Ich habe es bei „einfachem“ JS belassen und auf neuere Features wie let, foreach oder map verzichtet.

document.getElementById("filter").addEventListener("input", applyFilter);

function applyFilter(evt) {
   var themes = document.querySelectorAll("#themen li");
   var such = evt.target.value.toLowerCase();
   for (var i=0; i<themes.length; i++) {
      var theme = themes[i];
      var text = theme.querySelector("a").innerText.toLowerCase();
      if (text.indexOf(such) >= 0) {
         theme.classList.remove("hidden");
      }
      else {
      	theme.classList.add("hidden");
      }
   }
}

Das Ganze als JSFiddle. Lässt sich in der Darstellung sicherlich noch aufpimpen, aber darum geht es jetzt ja nicht primär.

Falls dein Raster eine Table ist, funktioniert die Idee natürlich nicht (naja, zumindest sieht's dann hässlich aus). Das ist aus deiner Beispielseite nicht erkennbar. Wenn Du statt Grid mit Flexbox, float oder einfach inline-block divs arbeitest, ist es aber kein Problem.

Rolf

[Hubert Burböck]

Hallo Rolf,

Danke für deine hier vorgestellte Alternative. Habe das JSFiddle ausprobiert und es gefällt mir ganz gut.

Für mich ist es jedoch wesentlich einfacher, auf meinen bereits bestehenden Seiten die Version mit datalist zu verwenden. Eine aufwendige Umgestaltung ist hier nicht notwendig.

Lediglich die Microsoft Browser EDGE und IE11 machen etwas Probleme, siehe: http://www.lrs-legasthenie.at/MGLtest/lesen.html

MfG. Hubert

[Rolf B]

Hallo Hubert,

das Thema mit "startsWith" statt "contains" Suche ist alt; wenn ich das in StackOverflow richtig lese hatten das früher alle Browser so, und FF und Chrome haben es geändert. Chrome angeblich mit Version 56 (Januar 2017). Microsoft ist ja bekanntlich etwas zurückhaltender; mein Edge 16 tut es nach wie vor nicht. Vielleicht ist es in Edge 17 geändert. Im IE wirst Du keine Änderung mehr sehen.

Wenn Dir der IE wichtig ist, musst Du nach Polyfills suchen (die naturgemäß nicht ganz einfach sind) oder dir doch mal meine Lösung angucken - dann aber besser nicht mit grid, weil IE eine Alt-Version der Grid-Spec implementiert und keine Auto-Positionierung kann.

Rolf

[Hubert Burböck]

Hallo Rolf,

deine Alternative ist nicht nur gut, sondern super! Hier die Testseite: http://www.lrs-legasthenie.at/MGLtest/lesen_test.html

Werd mir die Mühe machen und die paar Seiten mit dieser Version gestalten.

Danke nochmals für das tolle Skript.

Mit freundlichen Grüßen Hubert

[Rolf B]

Hallo Hubert,

gern geschehen.

Rolf