Javascript 修改我的代码,我想用自动完成功能替换输入框的选择下拉列表
由于我是angular中的noob,我真的需要一个指导,比如如何将此选择选项下拉列表替换为simple输入框。我正在从api中获取数据,目前我的api中的数据有限,因此使用“选择选项”下拉列表可以正常工作,但我的api将包含大量数据,因此我不希望我的用户滚动和搜索数据。相反,我希望他们键入并获取并选择该项目。这里我分享我的代码,我实现了选择选项下拉方法。请将我的代码修改到该输入框Javascript 修改我的代码,我想用自动完成功能替换输入框的选择下拉列表,javascript,angular,typescript,forms,api,Javascript,Angular,Typescript,Forms,Api,由于我是angular中的noob,我真的需要一个指导,比如如何将此选择选项下拉列表替换为simple输入框。我正在从api中获取数据,目前我的api中的数据有限,因此使用“选择选项”下拉列表可以正常工作,但我的api将包含大量数据,因此我不希望我的用户滚动和搜索数据。相反,我希望他们键入并获取并选择该项目。这里我分享我的代码,我实现了选择选项下拉方法。请将我的代码修改到该输入框 元数据-service.service.ts Pincode.ts register-page.component.
{{pin.pincode}}
{{modifiedText}}
修改您可以简单地使用ng select和typeahead特性,按照这里提到的教程操作
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Pincodes } from 'src/app/Model/Pincodes';
import { baseURL } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class MetadataServiceService {
constructor(private http:HttpClient) { }
public GetPincodes() : Observable<any> {
console.log("Calling GetPincodes API")
return this.http.get("/Metadata/api/metadata/getpincodes") // My API Link
}
}
{
"program": null,
"version": null,
"dateTime": null,
"success": true,
"errorCode": null,
"errorMessage": null,
"message": "Pincodes read Successfully",
"data": [
{
"pincode": 400708,
"village": "Airoli",
"taluka": "Thane",
"district": "Thane",
"state": "Maharashtra"
},
{
"pincode": 416007,
"village": "Kaamba",
"taluka": "Kalyan",
"district": "Thane",
"state": "Maharashtra"
},
{
"pincode": 421102,
"village": "Atali",
"taluka": "Kalyan",
"district": "Thane",
"state": "Maharashtra"
},
{
"pincode": 421501,
"village": "Ambarnath",
"taluka": "Ambarnath",
"district": "Thane",
"state": "Maharashtra"
},
{
"pincode": 421503,
"village": "Ambeshiv",
"taluka": "Ambarnath",
"district": "Thane",
"state": "Maharashtra"
}
]
}
export class Pincodes {
pincode : number
village : string
taluka : string
district : string
state : string
}
import { Component, OnInit } from '@angular/core';
import { Pincodes } from '../classes/pincodes';
import { MetaDataService } from '../services/meta-data.service';
import { FormBuilder, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
@Component({
selector: 'app-register-page',
templateUrl: './register-page.component.html',
styleUrls: ['./register-page.component.css']
})
export class RegisterPageComponent implements OnInit {
observeData: Pincodes[]
modifiedText: any;
PinSelected: any = {}
constructor(private _metaDataAPI: MetaDataService) {
}
ngOnInit() {
this._metaDataAPI.getData().subscribe(data => {
this.observeData = data;
});
}
onPincodeSelected(val: Pincodes) {
console.log("value" + val);
this.customFunction(val)
}
customFunction(val: Pincodes) {
// this.modifiedText = "The Selected Pin : " + val.pincode +
// " and selected District is " + val.village
this.modifiedText = "Selected Pin : " + val.pincode + "\n" +
"District : " + val.district + "\n" +
"Taluka : " + val.taluka
console.log("Modified Text: " + this.modifiedText);
console.log("Pincode Selected: " + this.PinSelected);
console.log("observeData Selected: " + this.observeData);
}
}
<select
[(ngModel)]="PinSelected"
(ngModelChange)="onPincodeSelected($event)"
>
<option *ngFor="let pin of observeData" [ngValue]="pin">
{{ pin.pincode }}
</option>
</select>
<div>
<p>{{ modifiedText }}</p>
</div>