Angular 5基于本地JSON数组实现自动补全功能的方法求教

别担心，我来帮你搞定这个本地JSON的自动补全！其实不用后端支持也能实现，咱们直接在前端基于你的本地数组做实时过滤就行，下面是具体的实现步骤和代码示例：

1. 准备本地JSON数据 #

假设你的JSON文件放在assets/data.json，格式大概是这样：

[
  { "id": 1, "name": "AngularJS" },
  { "id": 2, "name": "Angular 2" },
  { "id": 3, "name": "Angular 5" },
  { "id": 4, "name": "React" },
  { "id": 5, "name": "Vue.js" }
]

2. 配置组件依赖 #

首先确保你在AppModule里导入了必要的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 响应式表单模块
import { HttpClientModule } from '@angular/common/http'; // 用来读取本地JSON

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件逻辑实现（app.component.ts） #

在组件里，我们用FormControl监听输入变化，同时用HttpClient加载本地JSON，然后实现过滤逻辑：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  searchControl = new FormControl();
  allItems: any[] = [];
  filteredItems: Observable<any[]>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // 加载本地JSON数据
    this.http.get<any[]>('/assets/data.json').subscribe(data => {
      this.allItems = data;
      // 初始化过滤逻辑
      this.filteredItems = this.searchControl.valueChanges.pipe(
        startWith(''),
        map(value => this.filterItems(value))
      );
    });
  }

  // 过滤函数：根据输入值匹配item的name字段
  private filterItems(value: string): any[] {
    const filterValue = value.toLowerCase();
    return this.allItems.filter(item => item.name.toLowerCase().includes(filterValue));
  }

  // 选中选项时填充输入框
  selectItem(item: any) {
    this.searchControl.setValue(item.name);
  }
}

4. 模板实现（app.component.html） #

在模板里绑定表单控件，同时显示过滤后的下拉列表：

<div class="autocomplete-container">
  <input type="text" [formControl]="searchControl" placeholder="输入关键词搜索...">
  
  <!-- 自动补全下拉列表 -->
  <ul *ngIf="(filteredItems | async) as items && items.length > 0">
    <li *ngFor="let item of items" (click)="selectItem(item)">
      {{ item.name }}
    </li>
  </ul>
</div>

<!-- 可选：添加一些基础样式让界面更友好 -->
<style>
.autocomplete-container {
  position: relative;
  width: 300px;
}
input {
  width: 100%;
  padding: 8px;
}
ul {
  position: absolute;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
}
li {
  padding: 8px;
  cursor: pointer;
}
li:hover {
  background-color: #f5f5f5;
}
</style>

关键说明 #

• 防抖优化：如果你的数组很大，可以在valueChanges里添加debounceTime(300)来减少过滤频率，避免性能问题（需要导入debounceTime操作符）。
• 匹配规则：上面的例子是匹配name字段的包含关系，你可以根据自己的需求修改filterItems函数，比如匹配开头、全匹配等。
• 空值处理：当输入为空时，startWith('')会让下拉列表显示所有选项，如果你想空输入时不显示，可以调整逻辑。

这样就能完全基于本地JSON实现自动补全了，不需要后端的searchValue接口支持～

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