您好,登錄后才能下訂單哦!
這篇文章主要講解了在Angular中實現(xiàn)一個級聯(lián)效果的下拉框的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
實現(xiàn)一個具有級聯(lián)效果的下拉搜索框,實現(xiàn)的結(jié)果如下圖所示
我們主要通過這個組件,來學(xué)習(xí)一些細微的邏輯,比如: 如何計算input框內(nèi)文字的長度; 如何獲取光標(biāo)的位置;如何實現(xiàn)滾動條隨著上下鍵盤的按動進行移動......
具體需求如下
接下來我們根據(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ù)”.“來轉(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)中輸入”.“我們就需要進行再次幫用戶搜索結(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; }
看完上述內(nèi)容,是不是對在Angular中實現(xiàn)一個級聯(lián)效果的下拉框的方法有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。