ApiBlaze: UI-Interactions for Searching APIs

Handling Input in the Search Bar

document
.querySelector('#api-search-query')
.addEventListener('keyup', e => this.handleKeyUp(e))
handleKeyUp (e) {
switch (e.keyCode) {
// ...
default:
this.updateState({ apiSearchQuery: e.target.value })
this.triggerSearch()
break
}
}

Showing Search Reults in the Popup

Object.entries(apiElementsSearchResult).forEach((value, key) => {
const { name, containingObject, type, description } = object
var html = `
<div class="search-result" tabindex="${key}" ref="${name}">
//...
</div>`
this.addDom('#api-search-results', html)
}
handleKeyUp (e) {
switch (e.keyCode) {
case 40: // Arrow down
e.preventDefault()
this.focusNextElement(1)
break
case 38: // Arrow up
e.preventDefault()
this.focusNextElement(-1)
break
// ...
}
}
focusNextElement (incr) {
const { min, current, max } = this.tabIndex
const next = current + incr
if (next <= min) {
this.tabIndex.current = min
} else if (next >= max) {
this.tabIndex.current = max
}
document.querySelector(`.search-result[tabIndex="${next}"]`).focus()
}

Switch between Search Bar and Search Results

handleKeyUp (e) {
switch (e.keyCode) {
case 40: // Arrow down
e.preventDefault()
const searchResultDom = document.querySelector('div.search-result')
searchResultDom && searchResultDom.focus({ preventScroll: false })
break
//...
}
}
focusNextElement (incr) {
const { min, current, max } = this.tabIndex
const next = current + incr
if (next == -1) {
document
.querySelector('#api-elements-search-query')
.focus({ preventScroll: false })
return
}
if (next <= min) {
this.tabIndex.current = min
} else if (next >= max) {
this.tabIndex.current = max
}
document.querySelector(`.search-result[tabIndex="${next}"]`).focus()
}

Review: ApiBlaze Project Requirements

  • SEA02 — Show search results in a popup
  • SEA03 — Select a search result with arrow keys, enter and mouse click
  • ✅ SEA01 — Search for APIs by Keyword
  • ✅ SEA02 — Show search results in a popup
  • ✅ SEA03 — Select a search result with arrow keys, enter and mouse click
  • ✅ FRAME01 — Controller & Routing
  • ✅ FRAME02 — Stateful Pages & Components
  • ✅ FRAME03 — Actions
  • ✅ FRAME04 — Optimized Bundling
  • ✅ TECH01 — Use PlainJS & Custom Framework
  • ✅ TECH02 — Use SAAS for CSS

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sebastian

Sebastian

IT Project Manager & Developer