Guidance
Search form components allow users to find specific content or complete tasks. Users can input text and get results from a system that match the keywords they put in. Search forms can enhance the user experience by providing easy access to the information or services a website or application offers. Our design system has 2 types of search:
- Search (with button or icon): This is the most common type of search form. It features a field for users to input their search queries and a button or icon is used to initiate the search.
- Search with predictive text (and button or icon): Also known as an autocomplete search form, this type offers users suggestions based on user input, even before they complete typing their query. This can be particularly helpful when users are unsure of the spelling or full name of their search item. The predictions are typically sourced from a predetermined list, like city names, titles, or popular search terms.
Do
- Show search results using a content list
- Use predictive text when you want to get accurate form data for predetermined things (like city names, etc.)
Don’t
- Use in the header section - use the search in the main navigation component instead
- Put the search component in a modal
Search
You can create a search field with a button or an icon. Both types have labels that are visually hidden that must be included to ensure the component is accessible for people using assistive technology. The search field with a button should be your first choice. Use the search field with an icon when space is limited.
Search with button
HTML
<!-- Search with button -->
<form class="gnb-input-pair" role="search">
<label class="visually-hidden" for="search-field">Search</label>
<input type="search" id="search-field" />
<button class="gnb-btn-search"><span>Search</span></button>
</form>
Search with icon
HTML
<!-- Search with icon -->
<form class="gnb-input-pair" role="search">
<label class="visually-hidden" for="search-field-with-icon">Search</label>
<input type="search" id="search-field-with-icon" />
<button class="gnb-btn-search-icon-white"><span><span class="sr-only">Search</span></span></button>
</form>
Search with predictive text
You can use predictive text on a search field that allows users to choose something from the predictive list or write their own unique keywords.
These examples include basic javascript, but you can bring your own functionality.
Search with predictive text and button
HTML
<!-- Predictive search with button -->
<form class="gnb-input-pair" autocomplete="off" role="search">
<label for="predictiveSearchBtn" class="visually-hidden">Start typing to find your community</label>
<span class="autocomplete"><input id="predictiveSearchBtn" type="text" name="myCommunity" placeholder="Type to search..."></span>
<button class="gnb-btn-search"><span>Search</span></button>
</form>
<!-- Basic javascript for predictive list. Place just before closing body tag at the bottom of your page -->
<script>
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function (e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false; }
currentFocus = -1;
/*create a UL element that will contain the items (values):*/
a = document.createElement("ul");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a LI element for each matching element:*/
b = document.createElement("li");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (LI element):*/
b.addEventListener("click", function (e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values):*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function (e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("ul");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/*An array containing all the communities in New Brunswick:*/
var communities = ["Alma", "Aroostook", "Atholville", "Baker Brook", "Balmoral", "Bas-Caraquet", "Bath", "Bathurst", "Bathurst", "Belledune", "Beresford", "Bertrand", "Blacks Harbour", "Blackville", "Bouctouche", "Bristol", "Cambridge-Narrows", "Campbellton", "Campbellton", "Campbellton", "Canterbury", "Cap-Pelé", "Caraquet", "Centreville", "Charlo", "Chipman", "Clair", "Dalhousie", "Dieppe", "Doaktown", "Dorchester", "Drummond", "Edmundston", "Edmundston", "Eel River Crossing", "Florenceville", "Florenceville-Bristol", "Fredericton", "Fredericton", "Fredericton Junction", "Gagetown", "Grand Bay-Westfield", "Grand Falls / Grand-Sault", "Grand Manan", "Grande-Anse", "Hampton", "Hartland", "Harvey", "Hillsborough", "Kedgwick", "Lac Baker", "Lamèque", "Le Goulet", "Maisonnette", "McAdam", "Meductic", "Memramcook", "Millville", "Minto", "Miramichi", "Miramichi", "Moncton", "Moncton", "Nackawic", "Neguac", "New Maryland", "Nigadoo", "Norton", "Oromocto", "Paquetville", "Perth-Andover", "Petit Rocher", "Petitcodiac", "Plaster Rock", "Pointe-Verte", "Port Elgin", "Quispamsis", "Rexton", "Richibucto", "Riverside-Albert", "Riverview", "Rivière-Verte", "Rogersville", "Rothesay", "Sackville", "Saint Andrews", "Saint John", "Saint-Antoine", "Saint-François de Madawaska", "Saint-Isidore", "Saint-Louis de Kent", "Saint-Léolin", "Saint-Léonard", "Saint-Quentin", "Sainte-Anne-de-Madawaska", "Sainte-Marie - Saint-Raphaèl", "Salisbury", "Shediac", "Shippagan", "St. André", "St. George", "St. Hilaire", "St. Leonard", "St. Martins", "St. Stephen", "Stanley", "Sussex", "Sussex Corner", "Tide Head", "Tracadie-Sheila", "Tracy", "Woodstock"]
autocomplete(document.getElementById("predictiveSearchBtn"), communities);
</script>
Search with predictive text and icon
HTML
<!-- Predictive search with icon -->
<form class="gnb-input-pair" autocomplete="off" role="search">
<label for="predictiveSearchIcon" class="visually-hidden">Start typing to find your community</label>
<span class="autocomplete"><input id="predictiveSearchIcon" type="text" name="myCommunity" placeholder="Type to search..."></span>
<button class="gnb-btn-search-icon-white"><span><span class="sr-only">Search</span></span></button>
</form>
<!-- Basic javascript for predictive list. Place just before closing body tag at the bottom of your page -->
<script>
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function (e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false; }
currentFocus = -1;
/*create a UL element that will contain the items (values):*/
a = document.createElement("ul");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a LI element for each matching element:*/
b = document.createElement("li");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (LI element):*/
b.addEventListener("click", function (e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function (e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("ul");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/*An array containing all the communities in New Brunswick:*/
var communities = ["Alma", "Aroostook", "Atholville", "Baker Brook", "Balmoral", "Bas-Caraquet", "Bath", "Bathurst", "Bathurst", "Belledune", "Beresford", "Bertrand", "Blacks Harbour", "Blackville", "Bouctouche", "Bristol", "Cambridge-Narrows", "Campbellton", "Campbellton", "Campbellton", "Canterbury", "Cap-Pelé", "Caraquet", "Centreville", "Charlo", "Chipman", "Clair", "Dalhousie", "Dieppe", "Doaktown", "Dorchester", "Drummond", "Edmundston", "Edmundston", "Eel River Crossing", "Florenceville", "Florenceville-Bristol", "Fredericton", "Fredericton", "Fredericton Junction", "Gagetown", "Grand Bay-Westfield", "Grand Falls / Grand-Sault", "Grand Manan", "Grande-Anse", "Hampton", "Hartland", "Harvey", "Hillsborough", "Kedgwick", "Lac Baker", "Lamèque", "Le Goulet", "Maisonnette", "McAdam", "Meductic", "Memramcook", "Millville", "Minto", "Miramichi", "Miramichi", "Moncton", "Moncton", "Nackawic", "Neguac", "New Maryland", "Nigadoo", "Norton", "Oromocto", "Paquetville", "Perth-Andover", "Petit Rocher", "Petitcodiac", "Plaster Rock", "Pointe-Verte", "Port Elgin", "Quispamsis", "Rexton", "Richibucto", "Riverside-Albert", "Riverview", "Rivière-Verte", "Rogersville", "Rothesay", "Sackville", "Saint Andrews", "Saint John", "Saint-Antoine", "Saint-François de Madawaska", "Saint-Isidore", "Saint-Louis de Kent", "Saint-Léolin", "Saint-Léonard", "Saint-Quentin", "Sainte-Anne-de-Madawaska", "Sainte-Marie - Saint-Raphaèl", "Salisbury", "Shediac", "Shippagan", "St. André", "St. George", "St. Hilaire", "St. Leonard", "St. Martins", "St. Stephen", "Stanley", "Sussex", "Sussex Corner", "Tide Head", "Tracadie-Sheila", "Tracy", "Woodstock"]
autocomplete(document.getElementById("predictiveSearchIcon"), communities);
</script>