如何让HTML Select标签仅按字符串而非数字搜索选项？

原生HTML <select> 的键盘搜索逻辑是浏览器内置的，它只会从 <option> 标签的文本内容开头匹配，所以你的情况里只能从数字code开始搜，没法直接修改这个行为。下面给你两个可行的解决办法：

办法一：用Angular Material的MatSelect（推荐） #

如果你的项目可以引入Angular Material，MatSelect支持自定义过滤逻辑，完美适配你的需求：

1. 先确保已安装并导入Material相关模块：

// app.module.ts
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [MatSelectModule, MatOptionModule, ReactiveFormsModule]
})
export class AppModule {}

2. 组件里实现过滤逻辑：

// 组件.ts文件
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

codeValueList = [
  {code: 1111, value: 'oneoneone'},
  {code: 2222, value: 'twotwotwo'},
  {code: 3333, value: 'threethree'},
  {code: 4444, value: 'fourfourfour'}
];
selectedItem: any;
selectControl = new FormControl();
filteredOptions!: Observable<any[]>;

ngOnInit() {
  this.filteredOptions = this.selectControl.valueChanges.pipe(
    startWith(''),
    map(value => this.filterOptions(value))
  );
}

filterOptions(value: string): any[] {
  const filterValue = value.toLowerCase();
  // 只根据value部分过滤，忽略code
  return this.codeValueList.filter(option => 
    option.value.toLowerCase().includes(filterValue)
  );
}

3. 模板代码：

<mat-form-field>
  <mat-label>选择项</mat-label>
  <mat-select [formControl]="selectControl" [(value)]="selectedItem" (selectionChange)="updateOnProcess($event)">
    <mat-option [value]="null"></mat-option>
    <mat-option *ngFor="let item of filteredOptions | async" [value]="item">
      {{item.code}} - {{item.value}}
    </mat-option>
  </mat-select>
</mat-form-field>

这样用户输入关键词时，会自动过滤出value匹配的项，完全忽略code部分。

办法二：自定义模拟Select组件（无需第三方库） #

如果不想引入Material，可以自己用input+下拉列表实现：

1. 组件.ts：

codeValueList = [
  {code: 1111, value: 'oneoneone'},
  {code: 2222, value: 'twotwotwo'},
  {code: 3333, value: 'threethree'},
  {code: 4444, value: 'fourfourfour'}
];
selectedItem: any;
searchKeyword = '';
isDropdownOpen = false;

get filteredList() {
  if (!this.searchKeyword) return this.codeValueList;
  const keyword = this.searchKeyword.toLowerCase();
  return this.codeValueList.filter(item => 
    item.value.toLowerCase().includes(keyword)
  );
}

selectItem(item: any) {
  this.selectedItem = item;
  this.searchKeyword = `${item.code} - ${item.value}`;
  this.isDropdownOpen = false;
  this.updateOnProcess(item);
}

updateOnProcess(item: any) {
  // 你的原有逻辑
}

2. 模板代码（可搭配简单样式）：

<div class="custom-select">
  <input 
    type="text" 
    [(ngModel)]="searchKeyword"
    (focus)="isDropdownOpen = true"
    (blur)="setTimeout(() => isDropdownOpen = false, 200)"
    placeholder="搜索选择项"
  >
  <ul *ngIf="isDropdownOpen && filteredList.length">
    <li *ngFor="let item of filteredList" (click)="selectItem(item)">
      {{item.code}} - {{item.value}}
    </li>
  </ul>
</div>

3. 基础样式参考：

.custom-select {
  position: relative;
  width: 200px;
}
.custom-select input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.custom-select ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.custom-select li {
  padding: 8px;
  cursor: pointer;
}
.custom-select li:hover {
  background-color: #f0f0f0;
}

另外，你原来的代码有个小错误：*ngFor="let item of codeValueList" 里误用了未定义的变量s，正确写法应该是[ngValue]="item"和{{item.code}} - {{item.value}}。

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