[英]Autocomplete not working - Angular2
我正在嘗試在我的角度項目中應用自動完成功能,但是它不起作用。
這里的代碼-
<!-- Start ignoring BootLintBear -->
<form class="navbar-form navbar-left">
<!-- Stop ignoring BootLintBear -->
<div class="input-group" id="nav-group">
<input #input type="text" name="query" class="form-control" id="nav-input" (keyup)="onquery($event)"
[(ngModel)]="searchdata.query">
<div id="output"></div>
<script>
function suggestMe(data) {
document.getElementById('output').innerHTML = data;
}
var storeData = '';
document.getElementById('nav-input').onkeyup = function() {
if(storeData!== ''){
document.body.removeChild(storeData);
}
var textBox = document.getElementById('nav-input').value;
storeData = document.createElement('script');
storeData.src = 'http://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=suggestMe&search=' + textBox;
document.body.appendChild(storeData);
};
</script>
<div class="input-group-btn">
<button class="btn btn-default" id="nav-button" type="submit" (click)="submit()">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
歡迎提出建議:)
與其將純JavaScript與Typescript混合使用,為什么不將其與完整的Typescript混合使用? 嘗試這種方式或使其適應您的需求。 首先設置一個可觀察的流
data: Observable<any>;
private searchTerms = new Subject<string>();
onquery(term: string): void {
this.searchTerms.next(term);
}
接下來,設置搜索功能
ngOnInit(): void {
this.data = this.searchTerms
.debounceTime(300) // pause in events
.distinctUntilChanged() // ignore if search term not changed
.switchMap(term => term // switch to new observable each time
//http service to retrieve your data
? this.searchService.search(term)
: Observable.of<any>([])
)
.catch(error => {
console.log(error);
});
}
范本:
<input #input type="text" name="query" class="form-control" id="nav-input" (keyup)="onquery(input.value)">
<div id="output">
<div *ngFor="let item of (data | async)">{{ item }}</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.