我正在使用來自Angular bootstrap UI的 Angular UI typeahead
我想在打字頭輸入中添加一個下拉圖示，然后單擊該圖示，所有選項都應該可見。
即使我在單擊下拉圖示時選擇了一個選項，所有選項都應該可見，我該如何實作呢？
<input type="text" ng-model="search" placeholder="Search"
uib-typeahead="eachCatigory in catigories | limitTo:8"/>
任何建議都很棒
uj5u.com熱心網友回復：
靈感來自 Angular Powered Bootstrap 中的open on focus 示例。撰寫您自己的按鈕圖示并運行 click$.next('') 以將空搜索項傳遞給輸入。然后，Wich 將打開所有結果。
我只是分叉了 open on focus 示例并添加了按鈕圖示和切換方法。
在您的模板中：
<div class="input-container">
<button (click)="toggle()"><img src="image_src_here" alt="Icon"></button>
<input
id="typeahead-focus"
type="text"
class="form-control"
[(ngModel)]="model"
[ngbTypeahead]="search"
#instance="ngbTypeahead"
/>
</div>
在您的組件樣式中：
.input-container button {
position: absolute;
background: none;
border: none;
padding: .35rem;
}
.input-container input {
padding-left: 2rem;
}
在您的組件中：
export class NgbdTypeaheadFocus {
model: any;
showAll = false;
@ViewChild('instance', { static: true }) instance: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();
toggle() {
this.click$.next('');
}
search: OperatorFunction<string, readonly string[]> = (
text$: Observable<string>
) => {
const debouncedText$ = text$.pipe(
debounceTime(200),
distinctUntilChanged()
);
const clicksWithClosedPopup$ = this.click$.pipe(
filter(() => !this.instance.isPopupOpen())
);
const inputFocus$ = this.focus$;
return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
map((term) =>
(term === ''
? states
: states.filter(
(v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1
)
).slice(0, 10)
)
);
};
}
這是我的stackblitz 示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/530189.html
上一篇：多次重復一個范圍