Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Hur skapar man en fungerande sökruta i HTML?

1
Skriv svar
Permalänk
Medlem
●

Hur skapar man en fungerande sökruta i HTML?

Hej! Jag ska skapa en enkel webbsida till en kurs jag går, Webbutveckling. Jag har fixat en hyfsat snygg sökruta men behöver nu hjälp med all teknik bakom den, alltså hur gör man så att användaren faktiskt kan använda rutan till att hitta bland materialet på sidan. Behöver inte vara mer komplicerat än den enklaste tekniken, är nybörjare så vill inte tappa hoppet helt Hoppas att någon vill hjälpa och säg till om ni behöver mer info för att kunna hjälpa. Jag använder Brackets och Chrome för att förhandsvisa webbplatsen ifall det hjälper.... Tack!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

När du säger "fungerande", vad menar du mer exakt?
Ska användaren kunna skriva in en sökterm och få ett resultat?
Eller ska du bara skapa själva formuläret med tillhörande css formatering?

Ska du ha en funktionell sökfunktion bör du ha någon typ av backend eller js kod som svarar på frågan med en resultatsida för svaret.

Har du provat att goggle:a? Finns med 100% säkerhet information där.

Söktermer som: tutorial, guide, html, search, forms, javascript
bör hjälpa dig

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Hej! Jag ska skapa en enkel webbsida till en kurs jag går, Webbutveckling. Jag har fixat en hyfsat snygg sökruta men behöver nu hjälp med all teknik bakom den, alltså hur gör man så att användaren faktiskt kan använda rutan till att hitta bland materialet på sidan. Behöver inte vara mer komplicerat än den enklaste tekniken, är nybörjare så vill inte tappa hoppet helt Hoppas att någon vill hjälpa och säg till om ni behöver mer info för att kunna hjälpa. Jag använder Brackets och Chrome för att förhandsvisa webbplatsen ifall det hjälper.... Tack!

Gå till inlägget

Det är väl tanken med en kurs att du skall lära dig inte få hjälp att lösa dina uppgifter, vad lär du dig på att andra löser uppgifterna åt dig?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Hej! Jag ska skapa en enkel webbsida till en kurs jag går, Webbutveckling. Jag har fixat en hyfsat snygg sökruta men behöver nu hjälp med all teknik bakom den, alltså hur gör man så att användaren faktiskt kan använda rutan till att hitta bland materialet på sidan. Behöver inte vara mer komplicerat än den enklaste tekniken, är nybörjare så vill inte tappa hoppet helt Hoppas att någon vill hjälpa och säg till om ni behöver mer info för att kunna hjälpa. Jag använder Brackets och Chrome för att förhandsvisa webbplatsen ifall det hjälper.... Tack!

Gå till inlägget

Beror på vad du ska söka i. Ska du söka i text på din html sida så kan du göra det med JavaScript. I andra fall så gör man ett anrop mot en server som t.ex. söker mot en databas och presenterar resultatet. Går du en kurs så bör det väl stå kriterier för söket och exempel på hur man kan implementera det?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Hej! Jag ska skapa en enkel webbsida till en kurs jag går, Webbutveckling. Jag har fixat en hyfsat snygg sökruta men behöver nu hjälp med all teknik bakom den, alltså hur gör man så att användaren faktiskt kan använda rutan till att hitta bland materialet på sidan. Behöver inte vara mer komplicerat än den enklaste tekniken, är nybörjare så vill inte tappa hoppet helt Hoppas att någon vill hjälpa och säg till om ni behöver mer info för att kunna hjälpa. Jag använder Brackets och Chrome för att förhandsvisa webbplatsen ifall det hjälper.... Tack!

Gå till inlägget

Vi vill gärna hjälpa till med idéer och smådetaljer men vi vill inte lösa dina uppgifter åt dig. Kom med info om programspråk, visa vad du åstadkommit hittills och hur du tänker dig en fortsättning. Kanske även uppgiftstexten kan vara bra att börja med.

Visa signatur

Debian, bara Debian, Debian överallt

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Vad är det för material?
Är det hårdkodad HTML eller är det data ifrån en API / backend?

Om det är det förstnämnda så funkar väl ctrl+f bra? 😁

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Som ovan, vad är det för typ av resultat som skall visas & var är tanken att resultaten skall hämtas i från?

Är det data från en databas så behövs ett anrop till en backend. t.ex. php som generar en sql fråga av den data användaren matat in i sökrutan.

Därefter returneras den data som matchar det som användaren sökt efter.

Visa signatur

[IT-Dept]
Ryzen 5700x - 32 - 1070

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

om du vill bara ta in information i en ruta, så kan du tex skriva i din html

<input type="text" id="sokrutan">
<button id="sokknapp">Sök</button>

och sedan i din javascript skriva typ

document.getElementById('sokknapp').addEventListener('click', () => {
var detsomskrevisokrutan = document.getElementById('sokrutan').innerHTML;
// här gör man de saker man vill ska hända när man tryckt på knappen.

}

Visa signatur

I5 9600k@stock / Cooler Master Evo 212 / Gigabyte Z390 Gaming X / Corsair Vengeance LPX 16GB DDR4 3000MHz / MSI RTX2070 Gaming Z / EVGA 550 BQ / Asus VG27BQ 27" 165Hz

Ryzen 5 5600x@stock / Asus Rog Strix X570-E Gaming / Corsair Vengeance RGB Pro 16GB 3600MHz CL18 / MSI RTX3070 Suprim X / BeQuiet Pure Power 11 600W / Asus VG278Q 27" 144Hz

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Som de andra redan sagt, på en "riktig" sajt så har man något av

1. Ett API(backend) om anropas från sökrutan
2. Elastic Search(en produkt) som anropas t.ex. via REST API / Javascript
3. Azure Search... Google search, alla har tjänster för att indexera "dina" sidor/dokument, oftast kan man testa gratis

mvh Lazze

Redigera
Citera flera Citera
1
Skriv svar