Angular 에서 직렬 연결 효 과 를 실현 하 는 드 롭 다운 상자 의 예제 코드

직렬 연결 효과 가 있 는 드 롭 다운 검색 상 자 를 실현 합 니 다.다음 그림 과 같 습 니 다.

우 리 는 주로 이 구성 요 소 를 통 해 input 상자 안의 문자 길 이 를 어떻게 계산 하 는 지 등 미세한 논 리 를 배 웁 니 다.커서 의 위 치 를 가 져 오 는 방법;어떻게 스크롤 바 가 상하 키보드 의 버튼 에 따라 이동 하 는 것 을 실현 합 니까?
구체 적 인 수 요 는 다음 과 같다.
4.567917.직렬 검색 은 최대 3 급 을 초과 하지 않 습 니 다.

검색 상 자 는 텍스트 상자 의'...'을 따라 뒤로 이동 합 니 다.오른쪽으로 이동 하 는 최대 거 리 는 텍스트 상자 의 너 비 를 초과 할 수 없습니다

4.567917.사용자 가 이전의 연결 내용 을 수정 하면 검색 을 하지 않 고 검색 상 자 를 숨 깁 니 다.사용자 가 이전에 입력 한 것 이"...........................................................................
다음 에 우 리 는 수요 에 따라 우리 의 논 리 를 쓴다.
우선 html 페이지 를 만 듭 니 다.

   <input
    #targetInput
    autocomplete="off"
    nz-input
    [(ngModel)]="searchValue"
    (keydown)="handlePress($event)"
    (input)="handleSearchList()"/>
   
   <div #searchList class="search-popup" [hidden]="!visible" (keyDown)="onKeydown($event)">
     <nz-spin [nzSpinning]="searchLoading" [class.spinning-height]="searchLoading">
      <div class="data-box" *ngIf="searchData && searchData.length !== 0">
       <ul>
       //              ，              ~
        <li
         id="item"
         *ngFor="let item of searchData;let i = index;"
         [class.item-selected]="curIndex === i"
         (mouseover)='hoverDataItem(i)'
         (click)="onSelectClick(item)">
         <span [innerHTML]="item | highlightSearchResult:searchValue | safe: 'html'"></span>
        </li>
       </ul>
      </div>
     </nz-spin>
   </div>

.search-popup {
 height: 376px;
 width: 246px;
 overflow-y: auto;
 box-shadow: 0 2px 8px rgba(0,0,0,.15);
 border-radius: 4px;
 position: absolute;
 background-color: #fff;
 z-index: 999;
 top: 92px;
 right: 61px;

 .data-box {
  margin: 0 10px;

  &:not(:last-child) {
   border-bottom: 1px solid #E4E5E7;
  }

  .no-search-data {
   display: inline-block;
   width: 100%;
   text-align: center;
   color: #C3C9D3;
   line-height: 40px;
  }
 }

 & ul {
  margin: 0 -10px;
  margin-bottom: 0;
  text-align: left;
 }

 & li {
  padding: 3px 10px;
  position: relative;
  list-style: none;
  height: 32px;
  line-height: 26px;
  &:hover {
   cursor: pointer;
   background-color: #e6f7ff;
  }
  &.item-selected {
   background-color: #E6F7FF;
  }
 }

 &.item-selected {
  background-color: #E6F7FF;

 }

.hidden-box {
 display: inline-block;
 border: 1px solid #ddd;
 visibility: hidden;
}

관련 논 리 를 실현 하 다
앞의 두 가지 수요 에 따라 우 리 는 텍스트 상자 의"."뒤로 이동 해 야 합 니 다.오른쪽으로 이동 하 는 최대 거 리 는 텍스트 상자 의 폭 을 초과 할 수 없습니다."
사고방식:텍스트 상자 의 문자열 을'...'에 따라 배열 로 변환 하고 텍스트 상자 의 텍스트 길 이 를 가 져 올 방법 을 생각해 야 합 니 다.
텍스트 상자 의 텍스트 길 이 를 어떻게 가 져 옵 니까?
텍스트 의 내용 을 display:inline-block 의 div 용기 에 다시 넣 은 다음 용기 의 폭 을 가 져 올 수 있 습 니 다.다음 코드 와 같 습 니 다~

// html
 <!--     input       -->
 <div class="hidden-box" #firstLevel></div> //  ”.“     ，   0      
 <div class="hidden-box" #secondLevel></div> //  ”.“     ，   1      
 <div class="hidden-box" #allLevel></div> //            
 
 // ts
 import { ElementRef, Renderer2 } from '@angular/core';
 
 export class SearchListComponent {
  @ViewChild('searchList', { static: true }) public searchList: ElementRef;
  @ViewChild('firstLevel', { static: true }) public firstLevel: ElementRef;
  @ViewChild('secondLevel', { static: true }) public secondLevel: ElementRef;
  @ViewChild('allLevel', { static: true }) public allLevel: ElementRef;
  constructor(private _renderer: Renderer2) {}
     
  public setSearchPosition(rightValue: string): void {
    this._renderer.setStyle(
     this.searchList.nativeElement,
     'right',
     rightValue);
   } 
   
  public setSearchListPosition(targetValue: string): void {
  const inputWidth = 217;
  const defaultRightPosition = 60;
  const maxRightPosition = -148;
  const firstLevel = this.firstLevel.nativeElement;
  const secondLevel = this.secondLevel.nativeElement;
  const allLevel = this.allLevel.nativeElement;
  const targetValueArr = targetValue ? targetValue.split('.') : [];

  //  input    ，  ”.“       ，           div   ，           
  allLevel.innerHTML = targetValue;
  firstLevel.innerHTML = targetValueArr && targetValueArr[0];
  secondLevel.innerHTML = targetValueArr && targetValueArr.length > 1 ? targetValueArr[1] : '';

  //         ，          
  if (firstLevel.offsetWidth >= inputWidth
   || (firstLevel.offsetWidth + secondLevel.offsetWidth) >= inputWidth
   || allLevel.offsetWidth >= inputWidth) {
    this.setSearchPosition(this._renderer, this.searchList, `${maxRightPosition}px`);
   } else if (targetValueArr.length <= 1) {
   this.setSearchPosition(this.renderer, this.searchList, '61px');
  } else if (targetValueArr.length <= 2) {
   this.setSearchPosition(this.renderer, this.searchList, `${defaultRightPosition - firstLevel.offsetWidth}px`);
  } else if (targetValueArr.length <= 3) {
   this.setSearchPosition(renderer,
               this.searchList,
               `${defaultRightPosition - firstLevel.offsetWidth - secondLevel.offsetWidth}px`);
  }
 }
 }

여기 서 우 리 는 첫 번 째 와 두 번 째 수 요 를 완성 할 수 있 습 니 다.세 번 째 수 요 를 살 펴 보 겠 습 니 다.주로 사용자 가 입력 한 위치 와 수 정 된 내용 에 따라 검색 과 드 롭 다운 상 자 를 표시 할 지 여 부 를 결정 합 니 다.만약 에 사용자 가 입력 한 것 이 아니라면 저 희 는 표시 하지 않 습 니 다.만약 사용자 가 이전의 레벨 연결 에 입력 한다 면,우 리 는 다시 사용자 의 검색 결 과 를 도와 야 한다.
사고방식:수요 3 을 완성 하려 면 사용자 가 도대체 어디에서 조작 하 는 지 알 아야 한다.즉,우리 가 커서 의 위 치 를 알 수 있다 면 더욱 완벽 해 질 것 이다.

 //        
 public getCursorPosition(element: HTMLInputElement): number {
  let cursorPosition = 0;
  if (element.selectionStart || element.selectionStart === 0) {
   cursorPosition = element.selectionStart;
  }
  return cursorPosition;
 }
 
 //               
 public handlePress(event: KeyboardEvent): void {
   this.curPressKey = event.key;
  }

 //   input          
 public handleSearchList(value: string): void {
  this.curIndex = 0;
  const cursorPosition = this.getCursorPosition(this.targetInput.nativeElement); //       
  let targetValue = value;
  const targetValueArr = targetValue ? targetValue.split('.') : [];
  const valueArrLength = targetValueArr.length;
  this.setSearchListPosition(targetValue); //     
  //                  
  if (valueArrLength === 1
   || valueArrLength === 2 && cursorPosition >= targetValueArr[0].length + 1
   || valueArrLength === 3 && cursorPosition >= targetValueArr[0].length + targetValueArr[1].length + 2) {
    this.searchLoading = true;
    this.visible = true;
    ...         
  } else {
   this.hidePopup();
  }
 }

마지막 으로 더 좋 은 체험 을 위해 서 는 드 롭 다운 상자 가 키보드 이 벤트 를 지원 하도록 해 야 합 니 다.방법 도 간단 합 니 다.다음 과 같 습 니 다.

 public onKeydown(keyDownInfo: {index: number, code: number, e: KeyboardEvent}): void {
  const { code, e } = keyDownInfo;
  e.stopPropagation();
  if (code === 38) { //    
   e.preventDefault(); //              ，                 
   if (this.curIndex > 0) {
    this.curIndex--;
   }
  } else if (code === 40) { //    
   if (this.curIndex < this.searchData.length - 1) {
    this.curIndex++;
   }
  } else if (code === 13) {  //   ，        
   this.ruleModal.showModal();
   const curData = this.searchData[this.curIndex];
   if (curData) {
    this.onSelectClick(curData);
   }
  }
  //                         
  const lis = document.querySelectorAll('#item');
  const curLiEle = lis[this.curIndex] as HTMLElement;
  const searchList = this.searchList.nativeElement;
  const liEleHeight = 32;
  //（    li   offsetTop + li        -       ）
  searchList.scrollTop = curLiEle.offsetTop + liEleHeight - searchList.clientHeight;
 }

총결산
사실 이 직렬 검색 구성 요 소 는 유 니 버 설 이 강하 지 않 을 수도 있 습 니 다.하지만 이 루어 지 는 과정 에서 일부 디 테 일 논리 적 유 니 버 설 이 강 합 니 다.이 디 테 일 들 이 개발 중인 당신 에 게 도움 이 되 기 를 바 랍 니 다~❤
Angular 에서 하나의 직렬 연결 효 과 를 실현 하 는 드 롭 다운 상자 에 관 한 예제 코드 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 Angular 직렬 연결 드 롭 다운 상자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!