ApiBlaze: API 검색을 위한 UI 상호 작용

ApiBlaze는 키워드 검색, 객체, 속성 또는 끝점 필터링, 설명 및 코드 예제 보기 등의 API 사양을 탐색하는 도구입니다.ApiBlaze는 API에 대한 번개같이 빠른 특정 질문에 대한 답변을 도와줍니다.너는 이곳에서 시험해 볼 수 있다. apiblaze.admantium.com.
이전 글에서, 나는 ApiBlaze 인덱스 페이지의 정적 디자인: 가운데에 있는 검색 표시줄과 검색 결과를 표시하는 팝업 창을 소개했다.본고는 구체적인 검색 기능과 사용자의 상호작용 기능을 실현하였다.상호작용이 즉각 발생할 것이다.키를 클릭할 때마다 검색이 트리거되고 최적 일치 결과가 팝업 창에 표시됩니다.그런 다음 화살표 키를 사용하여 검색 결과를 찾아 강조 표시할 수 있습니다.enter 키를 누르거나 결과 중 하나를 클릭하면 선택한 API가 새 페이지로 로드됩니다.
본문은 최초로 발표되었다my blog.

검색 표시줄의 입력 처리
검색 표시줄에 새 문자나 숫자를 입력하면 검색이 트리거됩니다.검색 표시줄은 입력 필드입니다.JavaScript에서는 키를 눌렀을 때 터치keydown 이벤트, 키를 눌렀을 때 터치keyup 이벤트 등 두 가지 다른 이벤트 유형을 사용하여 입력 필드의 변경 사항을 알릴 수 있습니다.
두 이벤트 모두 취소할 수 있으므로 입력 필드 값을 업데이트하지 않는 등의 기본 동작을 방지할 수 있습니다.다른 점은 누르는 키가 탐지기에 어떻게 전달되는지 하는 것이다. keydown 에서는 문자열이고, keyup 에서는 디지털 코드이다.
화살표 키처럼 비 문자 입력을 처리해야 하기 때문에, 다음 예시와 같이 keyup 이벤트와 이벤트 탐지기를 사용하여 입력 필드를 처리할 것입니다.

document
.querySelector('#api-search-query')
.addEventListener('keyup', e => this.handleKeyUp(e))

이벤트를 트리거할 때 사용자 정의 방법 handleKeyUp() 을 호출합니다.이 방법은 switch case 문구를 사용하여 이벤트를 처리합니다.그것은 어떤 키를 눌렀는지 검사하고 그에 상응하여 처리한다.default 사례는 상태를 업데이트하고 검색을 트리거합니다.다음 문장을 보시오.

handleKeyUp (e) {
  switch (e.keyCode) {
    // ...
    default:
      this.updateState({ apiSearchQuery: e.target.value })
      this.triggerSearch()
      break
  }
}

이제 검색 결과가 어떻게 나오는지 봅시다.

팝업 창에 검색 결과 표시
검색이 터치되면 검색 표시줄의 현재 용어가 백엔드에 전달되고 백엔드는 일치하는 항목 목록을 되돌려줍니다.이러한 일치 항목은 페이지 상태에 저장됩니다.팝업 구성 요소를 포함하여 모든 구성 요소가 새로 고쳐집니다.
팝업 구성 요소는 검색 결과 목록을 옮겨다니며 HTML 표현을 보여 줍니다.여러 결과가 표시되면 화살표 키를 사용하여 엔트리 사이를 탐색할 수 있습니다.그러나 어떤 항목을 선택했는지, 그리고 다음에 어떤 항목을 선택해야 하는지 어떻게 추적합니까?
HTML 목록에는 Thetabindex의 특수 속성이 있습니다.이 색인은 각 항목의 고유한 식별자입니다.이 목록에서 중요한 이벤트를 터치할 때, 현재 선택한 항목에 따라 옵션 색인을 정하고, 선택한 순서에 따라 다음 항목을 정해야 합니다.우리는 색인이 범위를 넘어섰는지 확인해야 한다.
인코딩을 시작합시다.우선, 팝업 창의 모든 항목에 tabindex를 추가합니다.

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)
}

화살표 키를 누르는 것을 처리하기 위해서 keyup 이벤트를 다시 사용하고 호출할 사용자 정의 handleKeyUp() 함수를 정의합니다.이 함수에서, 우리는 위쪽 화살표를 누르거나 아래쪽 화살표를 눌렀을 때의 상황을 구분한다.

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()를 사용한다.다음 선택한 요소를 확정하는 논리적 총결은 다음과 같다.위쪽 화살표 키를 누르면 현재 선택한 인덱스를 1씩 증가하지만 목록 길이를 초과할 수 없습니다.아래쪽 화살표를 누르면 선택한 색인을 1로 줄이고 0을 초과하지 마십시오.그런 다음 탭 색인과 현재 선택한 색인 요소에 focus()를 적용합니다.

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()
}

검색 표시줄과 검색 결과 사이를 전환합니다.
마지막 상호작용은 화살표 키를 사용하여 검색 표시줄과 검색 결과 팝업 창 사이를 이동하는 것이다.
우리는 두 가지를 바꿔야 한다.우선 검색 표시줄에서 아래쪽 화살표를 누르고 검색 결과가 비어 있지 않으면 검색 결과의 첫 번째 하위 항목에 초점을 맞추십시오.그 다음에 검색 결과에서 위쪽 화살표를 눌렀을 때 다음 색인이 -1이면 초점을 검색 표시줄로 전환합니다.
첫 번째 변경 사항은 아래쪽 화살표 검색 표시줄 확장keyup 이벤트입니다.

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() 에서,next가 언제 값-1과 같은지 처리하기 위해 새로운 사례를 추가해야 합니다.

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()
}

이러한 변경을 통해 우리는 검색 표시줄과 검색 결과에 대한 완전한 내비게이션 시범을 얻을 수 있다.

검토: ApiBlaze 프로젝트 요구 사항
이 문서의 추가를 통해 API 검색 사양의 나머지 두 가지 ApiBlaze 요구 사항을 충족할 수 있습니다.

SEA02 - 팝업 창에 검색 결과 표시

SEA03 - 화살표 키를 사용하여 검색 결과를 선택하고 입력하고 마우스

를 클릭합니다.
전반적으로 다음과 같은 요구 사항이 완료되었습니다.

검색 API

✅ SEA01 - 키워드별 API 검색

✅ SEA02 - 팝업 창에 검색 결과 표시

✅ SEA03 - 화살표 키를 사용하여 검색 결과를 선택하고 마우스

를 입력하고 클릭합니다.

프레임

✅ FRAME01 - 컨트롤러 및 케이블 연결

✅ FRAME02 – 상태 페이지 및 구성 요소 있음

✅ 프레임 03-액션

✅ FRAME04 – 최적화 번들

기술

✅ TECH01 - PlainJS 및 사용자 정의 프레임 사용

✅ TECH02 - CSS에서 SAAS 사용

결론
검색 표시줄은 ApiBlaze의 시각적, 개념적 핵심 요소인 사용자 상호작용과 디스플레이 결과의 주요 요소입니다.본고는 검색 표시줄 API 규범에서의 상호작용이 어떻게 실현되는지 설명한다.검색 표시줄의 각 버튼은 응용 프로그램 상태 업데이트를 트리거하고 백엔드에 검색 요청을 보냅니다.WebSocket 연결로 인해 검색 결과가 클라이언트에 반환되어 즉시 표시됩니다.이 결과에서 사용자는 화살표 키를 통해 탐색을 하고 enter 키를 누르면 항목을 불러올 수 있습니다.JavaScript 키 프로세서를 효과적으로 사용하는 것이 중요합니다.