实现HTML输入框自动补全仅提示数字

方法1：用HTML5专属属性限制自动补全类型 #

给你的input标签加上autocomplete="numeric"属性，明确告诉浏览器这个输入框只应该提供数字类的自动补全建议：

<input #quickInput
        type="number"
        #tooltip="matTooltip"
        class="filter-input"
        (focusin)="tooltip.show()"
        matTooltip="{{ 'order.list.buttons.quick-find-expectations' | translate:locale.language }}.."
        matTooltipPosition="above"
        matInput 
        formControlName="quickSearchId" 
        placeholder="{{ 'order.list.buttons.quick-find' | translate:locale.language }}.."
        autocomplete="numeric" />

方法2：禁用默认补全，自定义数字提示列表 #

如果上面的方法不生效，直接关掉浏览器的默认自动补全，改用Angular Material的mat-autocomplete组件自己实现仅数字的提示：

第一步：修改模板代码 #

添加autocomplete="off"关闭默认提示，同时关联自定义的自动补全组件：

<mat-form-field floatLabel="never" [formGroup]="quickSearchForm"  (keyup.enter)="quickSearch()">
    <input #quickInput
            type="number"
            #tooltip="matTooltip"
            class="filter-input"
            (focusin)="tooltip.show()"
            matTooltip="{{ 'order.list.buttons.quick-find-expectations' | translate:locale.language }}.."
            matTooltipPosition="above"
            matInput 
            formControlName="quickSearchId" 
            placeholder="{{ 'order.list.buttons.quick-find' | translate:locale.language }}.."
            [matAutocomplete]="auto"
            autocomplete="off" />
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let num of filteredNumbers$ | async" [value]="num">
            {{ num }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

第二步：在组件类中实现过滤逻辑 #

维护你的历史数字记录，根据用户输入实时过滤出匹配的数字：

import { FormControl, FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 替换成你实际的历史数字记录
historyNumbers: number[] = [1001, 1002, 1003];
filteredNumbers$: Observable<number[]>;
quickSearchForm = this.fb.group({
  quickSearchId: ['']
});

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.filteredNumbers$ = this.quickSearchForm.get('quickSearchId')!.valueChanges.pipe(
    map(inputValue => this.filterMatchingNumbers(inputValue))
  );
}

filterMatchingNumbers(inputValue: string | number): number[] {
  const filterText = typeof inputValue === 'number' ? inputValue.toString() : inputValue.trim();
  return this.historyNumbers.filter(num => 
    num.toString().includes(filterText)
  );
}

方法3：清理浏览器缓存的非数字记录 #

如果浏览器已经存了之前输入的非数字历史，光改代码可能没立刻效果，你可以：

• 手动清除浏览器的表单历史（适合测试阶段）
• 在提交表单时做数字验证，只有合法数字才加入自定义历史列表，避免后续再出现非数字提示

注意：type="number"只是限制用户输入时的字符，但浏览器自动补全是基于之前的输入记录，不管当时的输入是否符合类型规则，所以需要额外处理补全逻辑。

内容的提问来源于stack exchange，提问作者Einsi