varje webbplats behöver en sökfält genom vilken en användare kan söka innehållet i deras oro på den sidan. En grundläggande sökfält kan endast göras med HTML, CSS och JavaScript. Advance söka algoritmer leta efter många saker som relaterat innehåll och sedan visar resultaten. Den som vi ska göra kommer att leta efter substrings i en sträng.
HTML
i det här avsnittet skriver vi HTML-delen av koden. I HTML kommer vi bara att länka våra stilmallar och vår JavaScript-fil., Inmatningstagg används för att skapa sökfältet och det innehåller flera attribut som typ, platshållare, namn. Vi behöver också en lista över objekt som kommer att innehålla olika djurnamn som gör det möjligt för oss att söka efter djur genom detta. Klasserna och ID: n som används i taggar kommer att definieras i stilmallen nedan.
utgång:
CSS
även om ovanstående inmatningstagg och den beställda listan ser bra ut, behöver den fortfarande lite styling., För sökraden styling läggs lite marginal och stoppning för att få det att se rent ut. Mätningarna är i procent så att den justerar sig när den används i vilken storlek som helst på skärmen (mobil, skrivbord etc). Webkit övergång används för att ändra bredden på sökfältet när du klickar. Den ursprungliga bredden på sökfältet är 30%, men när den klickas ändras den till 70% med en enkel övergång på 0,15 sekunder.
utgång
efter att lägga Styling, vår sida ska se ut så här.
Obs: Om stilen på din sida inte ändras, se till att stilen.,css-filen finns i samma mapp som index.HTML.
det är fortfarande ofullständigt, eftersom vi fortfarande behöver JavaScript för att slutföra funktionaliteten i den här sökfältet.
JavaScript
i HTML-koden i sökfältet gav vi ingången ett id = ” searchbar ”och onkeyup vi kallade, funktionen”search_animal”. onkeyup anropar funktionen varje gång en tangent släpps på tangentbordet.
vi får först vår input med getElementById. Se till att konvertera den till gemener för att undvika fall känslighet när du söker. En rad dokument lagras i x. detta innehåller varje lista som har id = ”djur”., Därefter körs en slinga för att kontrollera om innerHTML i varje dokument innehåller inmatningssubstringen om den inte gör det, är displayegenskapen inställd på ”ingen” så att den är osynlig på framsidan.
utgång: