그렇다면 @mention 자동 완성 기능을 구축하고 싶습니까?

AutoComplete는 친숙한 기능입니다. 검색 창에 입력하면 제안이 나타납니다. 전자 상거래에서 일반적이지만 타이핑 향상으로서의 사용은 종종 간과됩니다.

최신 웹 앱은 간단한 텍스트 영역을 넘어서고 있습니다. Twitter, Slack 및 Notion과 같은 소셜 및 생산성 플랫폼은 "@mention"패턴을 사용하여 사용자가 "@"또는 "#"와 같은 트리거를 사용하여 다른 사람을 참조 할 수 있습니다. 이는 제안 패널을 제공하여 타이핑 경험을 향상시켜 키보드를 떠나지 않고 빠른 참조를 허용합니다.

이 패턴은 사용자가 생성 한 컨텐츠의 일관성을 향상시킵니다. 예를 들어 해시 태그는 자유 형식 텍스트 내에서 반 구조화 된 데이터를 생성하여 컨텐츠 분류를 지원합니다. 언급 된 앱 리소스에서 연결 그래프를 작성하고 콘텐츠 권장 사항을 단순화하고 사용자 행동 분석을 단순화합니다.

라이브 데모보기 우리가 어떻게 구축했는지보기 ### 효과적인 @mentions 공예

성공적인 @mention autocomplete는 원활해야합니다. 유용한 조수로 작용하고, 입력 할 때 배우고, 언제 옆으로 옆으로 해야하는지 아는 것입니다. 사용자는 제안을 무시하거나 쉽게 사용하여 입력을 완료 할 수 있습니다.

트위터의 구현은 타이핑 된 단어가 더 이상 유효한 토큰이 아닌 경우 패널을 닫습니다 (예 : 핸들에는 공백이 포함되지 않으므로 공간 후). Slack의 접근 방식은보다 유연하여 다양한 휴리스틱을 사용하여 사용자 의도를 감지하여 전체 이름 검색을위한 공간을 허용합니다.

선택시 트위터는 패널을 닫고 언급을 삽입하며 계속 타이핑을위한 공간을 추가합니다. 이 작은 세부 사항은 유동적 인 사용자 경험에 기여합니다.

일단 추가하면 대화식이됩니다. 트위터에서 Arrow 키를 클릭하거나 사용하여 언급을 선택하면 패널을 다시 연상시켜 편집 및 전송시 올바른 알림을 허용합니다.

오픈 소스 자동 완성 라이브러리는이 프로세스를 단순화합니다. Algolia에 이상적으로 적합하지만 모든 데이터 소스와 함께 작동하며 접근 가능한 자동 완성 기능을 구축 할 수 있습니다.

제안 유형 결합

별개의 기호 (예 : "@"사람들의 경우 ", 해시 태그의 경우#")는 명확하게 정의 된 유형이 거의 없습니다. 그러나 더 많거나 덜 뚜렷한 유형의 경우 사용자는 모든 기호를 기억하는 데 어려움을 겪을 수 있습니다.

Federated Search (Multi-Source)를 사용하면 기호 당 여러 유형을 할당하여 다양한 패턴으로 압도적 인 사용자없이 발견 가능성을 향상시킵니다.

슬랙은 제안을 혼합하여 시각적으로 차별화합니다 (아이콘, 배지). 개념은 유형별 제안 (날짜, 사람, 링크), 일관성 및 사용자 근육 기억 촉진. 이 그룹화는 멀티 소스 쿼리 또는 AutoComplete의 Reshape API와 같은 도구를 통해 달성 할 수 있습니다.

개념은 또한 동적 자리 표시 자, 사용자가 탐색 할 때 업데이트하는 예측 제안을 활용하여 각 제안과 관련된 조치를 명확하게합니다. 그들은 CSS 사용자 정의 속성과 JavaScript를 영리하게 사용하여이를 달성합니다.

여러 소스의 결과 수를 관리하는 것은 어려울 수 있습니다. 스크롤 바가있는 고정 높이 패널 또는 결합/제한 메커니즘 (AutoComplete의 Reshape API 등)이이를 해결할 수 있습니다.

기본 검색을 넘어 확장

@mention 패턴의 다양성은 일반적인 구현을 넘어 확장됩니다. Slack의 이모티콘 검색 (사용 ":") 및 개념의 동작 삽입 ( "/") 유사한 메커니즘을 사용합니다. 특수 문자는 제안 패널을 열어 선택 및 응용 프로그램을 허용합니다.

개념의 접근 방식은 맞춤형 항목 템플릿과 스타일을 통한 패턴의 적응성을 강조합니다. 이것은 다양한 앱에서 친숙하고 유동적 인 경험을 만듭니다.

유형 완료 이상의 데모 ###을 참조하십시오

언급은 타이핑을 향상 시키지만 구성 상자는 대화 인터페이스로 작동 할 수 있습니다. 개념의 "/"바로 가기는 액션 삽입을 트리거하여 특정 유형의 새로운 블록을 만듭니다.

게임에서 대중화 된이 "슬래시 명령"패턴은 이제 Slack 및 Discord와 같은 앱에서 표준입니다. 그것은 일반적인 작업을 중앙 집중화하여 마찰과인지 부하를 줄입니다. 예를 들어, "/Zoom"명령은 Zoom 회의 시작 및 공유를 단순화합니다.

이전에 전원 사용자로 제한 된 슬래시 명령은 점점 더 널리 퍼지고 사용자 친화적입니다. 타이핑 경험을 보강하는 것은 복잡한 기능을 추가하는 것이 아니라 적시에 올바른 정보를 제공하고인지 부하를 줄이고 사용자 경험을 향상시키는 것입니다.

데모를 참조하십시오

위 내용은 그렇다면 @mention 자동 완성 기능을 구축하고 싶습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!