# 95: JavaScript för flera anpassade sökmotorer från Google - CSS-tricks

Innehållsförteckning

Alla våra Google-anpassade sökmotorer är inställda (vi ställer in en annan för varje sektion på webbplatsen). Vårt användargränssnitt för sökning är klart. Vi har mallar för varje sökresultats undersida redo att gå. Vi har bara ett sista steg för att få allt knutet ihop: få de lilla "Sök i" -länkarna att fungera.

Vi har gjort så mycket förberedelser här det kommer att bli ganska enkelt. Allt vi behöver göra är att ändra actionattributet i formuläret som innehåller vårt sökformulär när du klickar på olika områden för att söka i. Lätt cheezy jQuery grejer om jag någonsin har sett det.

För var och en av länkarna "Sök i:" ger vi det ett data-urlattribut. Detta attribut kommer att innehålla det värde som vi tänker flytta till actionattributet i formuläret när du klickar på länken. Det är precis vad vi gör i bara några rader av JS. Vi diskuterar kort hur metoden .attr () kan vara både en "getter" och en "setter", en vanlig sak i jQuery.

Vi spenderar resten av tiden på att skriva lite extra CSS och jQuery för att ställa in en "aktiv" klass på länkarna, så att när en användare klickar på "Forums" (eller någon av de andra) får de feedback om att sökbegränsningen för närvarande är aktiv (blir vit och understruken, som standard).

Intressanta artiklar...