Question

我正在尝试使用angular创建自动填充表格。

我的component.html页

<form method="post" [formGroup]="uploadForm" >
        <div class="form-group">
          <label for="sem">Select Semester</label>
          <input type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search"  formControlName="branch" id="sem" placeholder="Branch Name">
        </div>
        <button type="submit" [disabled]="" class="btn btn-primary">Submit</button>
</form>

和我的component.ts页面（从预先输入的示例中获取）

  uploadForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private userService: UserService) { }

  ngOnInit() {
     this.search = (text$: Observable<string>) => text$.pipe(
        distinctUntilChanged(),
         map(term => term.length < 2 ? []
           : this.result.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
       );
     }

我的user.service.ts是

branchData(branchData) {
    return this.http.post<DataResponse>('/user/branchSearch', branchData);
  }

数据将来自服务器，因此对于输入字段中的每个单词类型，查询都将发送到服务器，该服务器将返回类似这样的数组

[
   {
      _id: "1",
      branch: "A" 
    },
   {
      _id: "2",
      branch: "B" 
    },
   ]

，该branch将显示在下拉菜单中。

那么我将如何将每个键入的单词查询发送到服务器，然后在下拉列表中显示结果。

Answer 1

您可以尝试这样。

<form method="post" [formGroup]="uploadForm">
      <div class="form-group">
          <label for="sem">Select Semester</label>
          <input type="text" class="form-control" [formControlName]="branch" id="sem" placeholder="Branch Name">
      </div>
      <button type="submit" [disabled]="" class="btn btn-primary">Submit</button>
</form>



uploadForm: FormGroup;
private searchSubscribe;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      branch: [null, Validators.required]
    });

this.searchSubscribe = this.uploadForm
  .get('branch')
  .valueChanges.debounceTime(400)
  .distinctUntilChanged()
  .subscribe(value => {
    value = value.toLowerCase();
    // process the search data
  });

  }

Answer 2

因此对于带有输入文本字段的下拉菜单，NgBootsrap TypeHead会在focus上打开

<label for="typeahead-focus">Search for a state:</label>
<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  (focus)="focus$.next($event.target.value)"
  (click)="click$.next($event.target.value)"
  #instance="ngbTypeahead"
/>
<hr>
<pre>Model: {{ model | json }}</pre>

Answer 3

您可以参考Angular-Bootstrap给出的示例，这里的state是硬编码，但是您可以通过服务获取这些元素，而不是硬编码。在每种change方法上，您都可以从服务中获取数据，并在服务响应时，可以重新初始化自动完成变量。

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';

const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
  'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
  'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
  'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
  'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
  'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

@Component({
  selector: 'ngbd-typeahead-basic',
  templateUrl: './typeahead-basic.html',
  styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadBasic {
  public model: any;

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );

}

角度4的自动完成搜索下拉菜单

3 个答案: