Søkeboks for både Google og Wikipedia

Alekplay · 23. juni 2012

Heisann!

Jeg holder på med en liten nettside, og en av funksjonene her vil være et søkefelt med en nedtrekksliste som avgjør om du vil søke på Google eller Wikipedia. Jeg vil prøve å gjøre denne koden så simpel som mulig, mye fordi jeg ikke har alt for mye erfaring med javascript.

Derfor lurer jeg på om dere kan hjelpe meg med dette. Jeg har søkefeltet, nedtrekkslista og søkeknappen. Jeg har også fått det til å søke på både google og wikipedia, men problemet er at jeg må inn i koden å endre på om jeg skal til google eller wikipedia. Det er her jeg vil at nedtrekkslista skal gjøre en jobb.

Slik som jeg har forstått det, tror jeg at jeg må bruke javascript til å få dette til.

Koden min ser foreløpig slik ut:

<html>
<body>
<a>
<form name="mainsearch" id="mainsearch" action="http://www.google.com/search" method="get">
<tr>
<td>
<input type="text" id="searchfield" name="q" size="25" maxlength="255" value="">
</td>
</tr>
<select name="searchengine">
<option value="google">Google
<option value="wikipedia">Wikipedia
</select>
<tr>
<td align="center" style="font-size:75%">
<input type="submit" value="Search">
</td>
</tr>
</form>
</a>
</body>
</html>

For å søke på wikipedia trengs denne: http://www.wikipedia.org/search-redirect.php

For å søke på google trengs denne: http://www.google.com/search

Håper noen av dere er såpass gode i Javascript at dere kan få dette til. Tusen takk for hjelpen på forhånd (og om det finnes en vei rundt javascript, så sier jeg gjerne jatakk til den )

- Aleksander

Thomas. · 23. juni 2012

Det er riktig at du må bruke javascript (må ikke, finnes flere muligheter - men siden du ønsket javascript laget jeg et eksempel med det) Har laget et eksempel med jQuery. Du avslutter forresten ikke option-tagene dine i koden din.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/** Når vi trykker søk **/
$('#sok').click(function(e) {
 e.preventDefault();
 /** Hva vi skriver inn i søkeboksen **/
 var sokString = $('.sokString').val();
 /** Hva vi velger i dropdownlisten **/
 var sokMetode = $('.searchengine').val();
 var url = '';
 switch(sokMetode) {
  /** Når vi har valgt google **/
  case "google":
    url = 'http://www.google.com/search?q=' + sokString;
  break;
  /** Wikipedia **/
  case "wikipedia":
    url = 'http://en.wikipedia.org/wiki/Special:Search?search=' + sokString;
  break;
 }
 /** Videresend til riktig URL **/
 window.location = url;
});
});
</script>
</head>
<body>
<form name="mainsearch" id="mainsearch" method="get">
<tr>
<td>
<input type="text" id="searchfield" name="q" size="25" maxlength="255" value="" class="sokString">
</td>
</tr>
<select name="searchengine" class="searchengine">
<option value="google">Google</option>
    <option value="wikipedia">Wikipedia</option>
</select>
<tr>
<td align="center" style="font-size:75%">
<button id="sok">Søk</button>
</td>
</tr>
</form>
</body>
</html>

Endret 24. juni 2012 av Thomas.

Alekplay · 23. juni 2012

Det er riktig at du må bruke javascript Har laget et eksempel med jQuery. Du avslutter forresten ikke option-tagene dine i koden din.

TUSEN HJERTELIG TAKK! Dette hjalp virkelig!

Ja, la merke til det nå som du nevner det. Skal ikke skje igjen

BTW, jeg trenger litt kunnskap i JavaScript jeg også egentlig, om jeg skal klare å lage siden. Hvor har du lært dette her? Er det en bok du vil anbefale elns? Har lest "Kom i gang med HTML og XML", hvor det er et eller to små kapitler om JavaScript, men ikke noe som forklarer hvordan du skal klare å programmere dette selv. Bare hva det kan brukes til og noen eksempler, ikke i det hele tatt nok...

Igjen, tusen takk for svar! Håper du er villig til å hjelpe meg en annen gang også om jeg trenger hjelp. Meste jeg har av kunnskap i HTML og nettsidedesign er selvlært (+ den boka), så trenger all hjelp jeg kan få for å få denne nettsiden opp. Satser på en tidlig "beta" versjon til rundt juletider

Alekplay · 23. juni 2012

Btw, jeg må vel spørre om jeg har tillatelse til å bruke denne koden i nettsiden min? Bare sånn at jeg ikke blir saksøkt en gang om den skulle vise seg å trekke litt folk

Sånn, for ordens skyld. Har jeg din tillatelse til å bruke denne (om du har skrevet den selv)?

Og, om du har hentet deler av den fra et annet sted. Har jeg da tillatelse fra dem til å bruke den? Og isåfall, hvilken side er den hentet fra?

Takker igjen for all hjelp, og håper du er villig til å hjelpe meg videre om jeg skulle trenge det

Thomas. · 23. juni 2012

Btw, jeg må vel spørre om jeg har tillatelse til å bruke denne koden i nettsiden min? Bare sånn at jeg ikke blir saksøkt en gang om den skulle vise seg å trekke litt folk

Sånn, for ordens skyld. Har jeg din tillatelse til å bruke denne (om du har skrevet den selv)?

Og, om du har hentet deler av den fra et annet sted. Har jeg da tillatelse fra dem til å bruke den? Og isåfall, hvilken side er den hentet fra?

Takker igjen for all hjelp, og håper du er villig til å hjelpe meg videre om jeg skulle trenge det

Koden tok jeg fra deg, og bare la til javascript. Så fritt fram å bruke den

Bare spørre hvis du trenger mer hjelp.

Kan ikke anbefale noen bok for HTML eller Javascript, søk heller opp hva du lurer på/tutorials. I 99% av tilfellene vil du finne et svar på det du lurer på, og forhåpentligvis lærer du noe av det

MikkelRev · 24. juni 2012

Det er ikke riktig at du må bruke javascript for dette. En metode uten javascript:

<?php
if(isset($_POST["searchstring"]))
{
header("Location:http://".$_POST["site"].$_POST["searchstring"]);
}
else
{?>
<form method="post">
<input type="search" name="searchstring" placeholder="Søk etter">
<select name="site">
<option value="en.wikipedia.org/wiki/">Wikipedia</option>
<option value="www.google.com/search?q=">Google</option>
</select>
<input type="submit" value="Søk">
</form>
<?php }

Endret 24. juni 2012 av MikkelRev

Alekplay · 29. august 2012

Jeg har nå kommet videre på siden, og det er endelig tid for å sette inn søkefeltet. Problemet nå er at når jeg søker så åpnes det i samme vindu. Jeg ønsker at det heller skal åpnes i en ny fane, og jeg kan ikke bruke vanlige html koder for dette (siden det er javascript, har prøvd )

Har ikke fått prøvd din php kode ennå, men gjør det i morgen når jeg kommer hjem fra skolen, så om det er noen som har en løsning for php så er det også greit

Håper på svar

Mathias-S · 19. september 2012

For å åpne i nytt vindu, bytter du ut dette:

window.location = url;

med dette:

window.open(url);

(fra Thomas sin Jquery-kode)

Endret 19. september 2012 av Mathias-S

Olavxxx · 11. oktober 2012

Du kan se på Google CSE (custom search engine).

Nå koster riktignok en "stor" løsning penger, men du kan fint bruke CSE for å vise googletreff på din egen side. Å hente wikipediaartikler som er relevant for søket kan du også gjøre via APIer.

Se feks her også:

https://gist.github.com/674522 (jeg har aldri testet mot wiktionary selv, men google cse har jeg implementert for en kunde).

Samt se her

http://www.ibm.com/developerworks/opensource/library/x-phpwikipedia/index.html

Endret 11. oktober 2012 av Olavxxx

Logg inn

Søkeboks for både Google og Wikipedia

Anbefalte innlegg

Alekplay

Lenke til kommentar

Videoannonse

Thomas.

Lenke til kommentar

Alekplay

Lenke til kommentar

Alekplay

Lenke til kommentar

Thomas.

Lenke til kommentar

MikkelRev

Lenke til kommentar

Alekplay

Lenke til kommentar

Mathias-S

Lenke til kommentar

Olavxxx

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer