diff --git a/javascripts/filter-code-examples.js b/javascripts/filter-code-examples.js
new file mode 100644
index 000000000000..c6592672e418
--- /dev/null
+++ b/javascripts/filter-code-examples.js
@@ -0,0 +1,92 @@
+function filterCards (cards, value) {
+ const noResults = document.querySelector('.js-code-example-no-results')
+ const matchReg = new RegExp(value, 'i')
+
+ // Track whether or not we had at least one match
+ let hasMatches = false
+
+ for (let index = 0; index < cards.length; index++) {
+ const card = cards[index]
+
+ // Filter was emptied
+ if (!value) {
+ // Make sure we don't show the "No results" blurb
+ hasMatches = true
+
+ // Hide all but the first 6
+ if (index > 5) {
+ card.classList.add('d-none')
+ } else {
+ card.classList.remove('d-none')
+ }
+
+ continue
+ }
+
+ // Check if this card matches
+ const { title, description, tags } = card.dataset
+ const cardMatches = (
+ matchReg.test(title) ||
+ matchReg.test(description) ||
+ matchReg.test(tags)
+ )
+
+ if (cardMatches) {
+ card.classList.remove('d-none')
+ hasMatches = true
+ } else {
+ card.classList.add('d-none')
+ }
+ }
+
+ // If there wasn't at least one match, show the "no results" text
+ if (!hasMatches) {
+ document.querySelector('.js-code-example-filter-value').textContent = value
+ noResults.classList.remove('d-none')
+ } else {
+ noResults.classList.add('d-none')
+ }
+}
+
+export default function filterCodeExamples () {
+ const filter = document.querySelector('.js-code-example-filter')
+ if (!filter) return
+
+ const cards = Array.from(document.querySelectorAll('.js-code-example-card'))
+ const showMoreButton = document.querySelector('.js-code-example-show-more')
+
+ filter.addEventListener('keyup', evt => {
+ const value = evt.currentTarget.value
+
+ // Show or hide the "Show more" button if there is a value
+ if (value) showMoreButton.classList.add('d-none')
+ else showMoreButton.classList.remove('d-none')
+
+ filterCards(cards, value)
+ })
+
+ showMoreButton.addEventListener('click', evt => {
+ // Number of cards that are currently visible
+ const numShown = cards.filter(card => !card.classList.contains('d-none')).length
+ // We want to show 6 more
+ const totalToShow = numShown + 6
+
+ for (let index = numShown; index < cards.length; index++) {
+ const card = cards[index]
+
+ // If the card we're at is less than the total number of cards
+ // we should show, show this one
+ if (index < totalToShow) {
+ card.classList.remove('d-none')
+ } else {
+ // Otherwise, we've shown the ones we intend to so exit the loop
+ break
+ }
+ }
+
+ // They're all shown now, we should hide the button
+ if (totalToShow === cards.length) {
+ evt.currentTarget.style.display = 'none'
+ }
+ })
+}
diff --git a/javascripts/index.js b/javascripts/index.js
index 8d381eff36fa..a6d6f4649ebf 100644
--- a/javascripts/index.js
+++ b/javascripts/index.js
@@ -15,6 +15,7 @@ import experiment from './experiment'
import copyCode from './copy-code'
import { fillCsrf } from './get-csrf'
import initializeEvents from './events'
+import filterCodeExamples from './filter-code-examples'
document.addEventListener('DOMContentLoaded', async () => {
displayPlatformSpecificContent()
@@ -32,4 +33,5 @@ document.addEventListener('DOMContentLoaded', async () => {
experiment()
copyCode()
initializeEvents()
+ filterCodeExamples()
})
diff --git a/layouts/product-landing.html b/layouts/product-landing.html
index 8c87a431694d..4ffcedfc368d 100644
--- a/layouts/product-landing.html
+++ b/layouts/product-landing.html
@@ -30,7 +30,7 @@