[英]Autocomplete not working - Angular2
I'm trying to apply the autocomplete feature in my angular project, but it does not works. 我正在尝试在我的角度项目中应用自动完成功能,但是它不起作用。
Here code - 这里的代码-
<!-- 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>
Suggestions are welcomed : ) 欢迎提出建议:)
Instead of mixing pure JavaScript with Typescript, why not do it in full Typescript ? 与其将纯JavaScript与Typescript混合使用,为什么不将其与完整的Typescript混合使用? Try this way or adapt it to your need. 尝试这种方式或使其适应您的需求。 First set up an observable stream 首先设置一个可观察的流
data: Observable<any>;
private searchTerms = new Subject<string>();
onquery(term: string): void {
this.searchTerms.next(term);
}
Next, set up the search feature 接下来,设置搜索功能
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);
});
}
Template : 范本:
<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.