在Angular中實現(xiàn)一個級聯(lián)效果的下拉框的示例代碼

更新時間：2020年05月20日 10:22:29 作者：mm_t

這篇文章主要介紹了在Angular中實現(xiàn)一個級聯(lián)效果的下拉框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實現(xiàn)一個具有級聯(lián)效果的下拉搜索框，實現(xiàn)的結(jié)果如下圖所示

我們主要通過這個組件，來學(xué)習(xí)一些細(xì)微的邏輯，比如: 如何計算input框內(nèi)文字的長度；如何獲取光標(biāo)的位置；如何實現(xiàn)滾動條隨著上下鍵盤的按動進(jìn)行移動......

具體需求如下

級聯(lián)搜索最多不超過三級，以”.“作為級聯(lián)搜索的連接符
搜索框跟著文本框中的”.“進(jìn)行向后移動，向右移動的最大距離不能超過文本框的寬度
當(dāng)用戶修改之前的級聯(lián)內(nèi)容，則不進(jìn)行搜索，并隱藏搜索框；若用戶在之前輸入的是”.“, 則將此”.“之后的內(nèi)容全部刪除并搜索當(dāng)前的相關(guān)內(nèi)容

接下來我們根據(jù)需求，來寫我們的邏輯

首先我們搭建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>
       // 這里在上篇文章中已經(jīng)講解過，如何實現(xiàn)讓匹配的文字高亮顯示~
        <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;
}

實現(xiàn)相關(guān)的邏輯

根據(jù)前兩個需求，我們需要根據(jù)文本框中的”.“進(jìn)行向后移動，向右移動的最大距離不能超過文本框的寬度。

思路：我們需要將文本框中的字符串根據(jù)”.“來轉(zhuǎn)換成數(shù)組，并且要想辦法獲取文本框中文字的長度。
如何獲取文本框中文字的長度呢？
我們可以將文字的內(nèi)容，重新放到一個display: inline-block的div容器中，然后獲取容器的寬度，如下代碼所示~

// html
 <!-- 用于測量input框的文字寬度 -->
 <div class="hidden-box" #firstLevel></div> // 以”.“轉(zhuǎn)化的數(shù)組，下標(biāo)為0的內(nèi)容的寬度
 <div class="hidden-box" #secondLevel></div> // 以”.“轉(zhuǎn)化的數(shù)組，下標(biāo)為1的內(nèi)容的寬度
 <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中的內(nèi)容，根據(jù)”.“轉(zhuǎn)換成數(shù)組之后，將相關(guān)的內(nèi)容賦值到新的div容器中，為了便于獲取文字的寬度
  allLevel.innerHTML = targetValue;
  firstLevel.innerHTML = targetValueArr && targetValueArr[0];
  secondLevel.innerHTML = targetValueArr && targetValueArr.length > 1 ? targetValueArr[1] : '';

  // 得到相關(guān)寬度之后，實現(xiàn)下拉框移動的邏輯
  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`);
  }
 }
 }

到這里，我們可以完成第一和第二個需求，我們再來看看第三個需求：主要是根據(jù)用戶輸入的位置以及修改的內(nèi)容，來決定是否顯示搜索和顯示下拉框，如果用戶輸入的不是”.“我們則不顯示，如果用戶在之前的級聯(lián)中輸入”.“我們就需要進(jìn)行再次幫用戶搜索結(jié)果。

思路：要想完成需求三，我們需要知道用戶到底是在哪里操作,即我們要是可以知道光標(biāo)的位置就更完美了~

 // 獲取光標(biāo)的位置
 public getCursorPosition(element: HTMLInputElement): number {
  let cursorPosition = 0;
  if (element.selectionStart || element.selectionStart === 0) {
   cursorPosition = element.selectionStart;
  }
  return cursorPosition;
 }
 
 // 用來獲取用戶輸入的內(nèi)容是什么
 public handlePress(event: KeyboardEvent): void {
   this.curPressKey = event.key;
  }

 // 用戶input的時候調(diào)用的核心方法
 public handleSearchList(value: string): void {
  this.curIndex = 0;
  const cursorPosition = this.getCursorPosition(this.targetInput.nativeElement); // 獲取光標(biāo)位置
  let targetValue = value;
  const targetValueArr = targetValue ? targetValue.split('.') : [];
  const valueArrLength = targetValueArr.length;
  this.setSearchListPosition(targetValue); // 調(diào)整位置
  // 判斷那些情況下應(yīng)該搜索并顯示下拉框
  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;
    ...獲取下拉框中的數(shù)據(jù)
  } else {
   this.hidePopup();
  }
 }

最后為了更好的提高用的體驗，我們還需要讓下拉框支持鍵盤事件哦~方法也很簡單，如下所示

 public onKeydown(keyDownInfo: {index: number, code: number, e: KeyboardEvent}): void {
  const { code, e } = keyDownInfo;
  e.stopPropagation();
  if (code === 38) { // 鍵盤上
   e.preventDefault(); // 防止光標(biāo)由最后邊移動到前邊，只是在開發(fā)中遇到的一點體驗上小問題
   if (this.curIndex > 0) {
    this.curIndex--;
   }
  } else if (code === 40) { // 鍵盤下
   if (this.curIndex < this.searchData.length - 1) {
    this.curIndex++;
   }
  } else if (code === 13) {  // 回車，即相當(dāng)于用戶點擊
   this.ruleModal.showModal();
   const curData = this.searchData[this.curIndex];
   if (curData) {
    this.onSelectClick(curData);
   }
  }
  // 實現(xiàn)下拉框的滾動條隨著鍵盤的上下鍵按動時一起移動
  const lis = document.querySelectorAll('#item');
  const curLiEle = lis[this.curIndex] as HTMLElement;
  const searchList = this.searchList.nativeElement;
  const liEleHeight = 32;
  //（當(dāng)前選中l(wèi)i標(biāo)簽的offsetTop + li標(biāo)簽自身的高度 - 下拉框的高度）
  searchList.scrollTop = curLiEle.offsetTop + liEleHeight - searchList.clientHeight;
 }

總結(jié)

其實這個級聯(lián)搜索的組件，他的通用性可能并不是很強(qiáng)，但是在實現(xiàn)的過程中，一些細(xì)節(jié)邏輯的通用性還是比較強(qiáng)的~ 希望這些細(xì)節(jié)可以給同在開發(fā)中的你帶來一些幫助~❤

到此這篇關(guān)于在Angular中實現(xiàn)一個級聯(lián)效果的下拉框的示例代碼的文章就介紹到這了,更多相關(guān)Angular級聯(lián)下拉框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: