Wie kann man eine Suchmaske mit einem Schriftzug verknüpfen?

[AlextheKid]

Hallo liebe Community,

ich bin neu hier und freue mich jetzt Mitglied zu sein, was HTML angeht bin ich blutiger Anfänger und bin absolut noch nicht fit...
Zu meinem Problem:
ich habe da einen Schriftzug auf meiner HTML Seite, da steht "google", jetzt habe ich da noch eine Suchmaske, ganz normal mit "input" erstellt, wie verknüpfe ich beide, sodass, wenn ich in die Suchmaske ein Wort eintippe, dann auf das Wort "google" tippe, er auf google geht und mir dann das gesuchte anzeigt?

Ich würde mich wirklich sehr über eine Antwort freuen, vielen Dank schon mal.


Alex

 

[slsb02]

Hallo AlextheKid,

möchtest du nur mit HTML arbeiten oder ist auch z.B. Javascript eine Option, für dich? In diesem Fall, gibt es mehrere Wege, die nach Rom führen ;-)

 

[AlextheKid]

hallo slsb02,

also ich habe gehört, dass wenn man das scripten vermeiden kann, dann gerne. ansonsten bin ich für alles offen - hauptsache es geht.

ich erkläre nochmal genau was ich vorhab, also:

stellt euch vor da sind 4 button bzw. keine button sondern einfach nur eine schriftzeichen und daneben ist eine eingabemaske, auf den "buttons" stehen dinge wie "google", "wikipedia", "dict" und "leo". folgendes szenario, ich tippe "hallo" in die suchmaske und klicke dann auf wikipedia, dann soll er das wort bei wiki suchen, wenn ich auf leo. klicke, dann soll er auf die leo.org seite gehen und mir das wort vom deutschen ins englische übersetzen usw.

versteht ihr was ich meine?
meiner vorstellung nach greifen quasi alle button auf diese suchmaske drauf und je nach dem welche per maus aktiviert wird, ergibt das eine andere aktion..

ich kanns leider nicht umsetzen und probiere hier schon seit... ach stunden/tagen...

 

[slsb02]

ohne Script würde ich das so machen (Achtung funktioniert nur mit HTML 5 kompatiblen Browsern)

<form>
<label>Suchwort:<input type="text" name="q" size="40"></label><br/>
<input type="submit" value="Google" formaction="https://www.google.de/search" formmethod="GET">
<input type="submit" value="Wikipedia" formaction="http://www.wikipedia.de" formmethod="post">
</form>

Das Problem was sich daraus ergibt ist, alle Seiten brauchen eine andere Anfrage. Daher lässt es sich schlussendlich doch wieder nur per Script machen. Denn die Paramter der URL müssen entsprechend angehangen werden.

 

[AlextheKid]

okay, das hilft mir eigtl. schon sehr gut weiter! wobei du wahrscheinlich gerade das problem meinst, wo ich versuche den richtigen link für die wikipedia seite zu finden, dass er auch gleich mit der suche beginnt... bei google klappt das ja, aber gibt es denn nicht eine möglichkeit dieses suchparamter einfach variable zu lassen und mit dem eingegeben wort dann einfach zu ersetzen?

oder verstehe ich da etwas nicht richtig?

vielen dank auf jeden fall schon mal. die skriptvariante ist wahrscheinlich wesentlich komplizierter, was?


EDIT:
ja, ich denke, ich weiß was du meinst... und zwar muss man das mit dem script lösen, da man zb. alleine schon bei der wikipedia-suche eine variable von der suchmaske an den button übergeben muss oder?
anders wäre es sonst ein schon vordefiniertes suchwort.. aber das ergibt ja keinen sinn.. :)

 

[AlextheKid]

@slsb02
schau mal, hier in der html datei funktioniert das genau so wie ich es haben will...
ich kann allerdings diese funktionen bzw. dieses script einfach nicht extrahieren(will nur das mit der suchesache)

hier steht das aber drin, kann mir jemand einen tipp geben, was genau ich übernehmen muss?

p.s: diese seite war sehr mächtig und hatte viele funktionen, deshalb wundert euch nicht über diesen ganzen quellcode:

 

[slsb02]

Dann so:

<script type="text/javascript">
$( document ).ready(function() {
 $(".search-link").click(function () {
  var searchID = $(this).attr("id");
  switch(searchID) {
  case 'speiseplan-suche':
  href = "https://www.speiseplan.de/search?q=" + $('#suche').val();
   $(this).attr("href", href);
  break;
  case 'google-suche':
   href = "https://www.google.de/search?q=" + $('#suche').val();
   $(this).attr("href", href);
  break;
  case 'woerterbuch-suche':
   href = "http://woerterbuch.de/wiki/" + $('#suche').val();
   $(this).attr("href", href)
  break;
  case 'translate-suche':
   href = " http://translate.de/wiki/" + $('#suche').val();
   $(this).attr("href", href)
  break;
  case 'wikipedia-suche':
   href = "http://de.wikipedia.org/wiki/" + $('#suche').val();
   $(this).attr("href", href)
  break;
  }
 });
});
</script>

<header>
<title>Pathfinder 1.0</title>
  <nav>
  <a href="#" class="search-link" id="speiseplan-suche" target="_blank">Speiseplan</a>
  <a href="#" class="search-link" id="google-suche" target="_blank">Google</a>
  <input type="text" id="suche" placeholder="Suche">
  <a href="#" class="search-link" id="woerterbuch-suche" target="_blank">Wörterbuch</a>
  <a href="#l" class="search-link" id="translate-suche" target="_blank">Translate</a>
  <a href="#" class="search-link" id="wikipedia-suche" target="_blank">Wikipedia</a>
  </nav>
</header>

 

[AlextheKid]

vielen, vielen lieben dank! das hat mein problem gelöst!!

beste grüße
alex