AngularJS 자동 완성

  2. 어떻게
  3. Angular 방법
  4. AngularJS 자동 완성
Oluwafisayo Oluwatayo 2024년2월15일
Angular Angular Autocomplete Angular Bootstrap
  1. REST API 및 Bootstrap을 사용하여 AngularJS 자동 완성 구현
  2. ng-autocomplete 모듈을 사용하여 AngularJS 자동 완성 구현
  3. Angular Material을 사용하여 AngularJS 자동 완성 구현
  4. 결론
AngularJS 자동 완성

자동 완성 기능은 여러 가지 이유로 삶을 더 쉽게 만들어주는 기능 중 하나입니다. 입력창에 글자를 입력하면 우리가 만들려는 단어의 제안과 예측이 표시되기 때문에 텍스트를 쉽고 빠르게 작성할 수 있습니다.

또한 특정 이름이 이름 목록에 있는지 확인하려는 경우 자동 완성 기능은 입력할 때 이름을 제안하므로 의사 Ctrl+F.

Angular 프레임워크에는 자동 완성 기능을 사용하는 다양한 방법이 있습니다.

REST API 및 Bootstrap을 사용하여 AngularJS 자동 완성 구현

이 메서드에서 자동 완성 기능을 만들기 위해 부트스트랩에서 구조와 스타일을 가져옵니다. 그런 다음 REST API를 사용하여 검색할 데이터를 얻습니다.

우선 ng new autocomplete를 사용하여 새 파일을 만든 다음 서비스 파일을 만들어야 합니다. 이것은 REST API를 사용하여 데이터를 가져올 코드를 넣을 파일입니다.

다음으로 getbootstrap.com으로 이동하여 시작하기를 클릭한 다음 CSS 제목 아래에서 아래와 같이 링크를 복사하여 index.html 파일의 head 태그 안에 붙여넣습니다.

코드 스니펫 - index.html:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgAutoComplete</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>
  <app-root></app-root>
</body>

</html>

그런 다음 app.component.html 파일로 이동하여 Bootstrap으로 페이지 구조를 만듭니다. Bootstrap 페이지에서 autocomplete를 검색하고 Datalists 아래의 코드 스니펫을 복사하여 붙여넣습니다.

그런 다음 아래와 같이 검색할 데이터를 수용하도록 코드 스니펫을 조정합니다.

코드 스니펫 - app.component.html:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form mt-5">
        <label for="exampleDataList" class="form-label">Datalist example</label>
        <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."
          (change)="nameValue($any($event.target).value)">
        <datalist id="datalistOptions">
          <option *ngFor="let post of posts" [value]="post.name">
        </datalist>
      </form>
    </div>
  </div>
  <div class="row mt-5" *ngIf="username">
    <div class="col-sm-4">
      <div class="card purple">
        <h3 class="title">{{username}}</h3>
      </div>
    </div>
  </div>
</div>

ngFor 기능을 사용하여 목록에서 선택한 다른 이름으로 웹 페이지를 렌더링합니다. 그런 다음 auto.service.ts 파일에서 생성한 데이터를 가져오기 위해 app.component.ts에 코드를 빌드합니다. 결국 다음과 같아야 합니다.

코드 스니펫 - app.component.ts:

import { Component, OnInit } from '@angular/core';
import { AutoService } from './auto.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'autocomthree';
  posts!: any;
  username: any;
  constructor(private service: AutoService) { }
  ngOnInit() {
    this.getAllData();
  }
  getAllData() {
    this.service.getData().subscribe((res: any) => {
      this.posts = res;
      console.log(this.posts);
    });
  }
  nameValue(name: any) {
    this.username = name;
    console.log(this.username);
  }
}

app.module.ts는 앱을 작동시키는 데 필요한 종속성/모듈을 가져오는 곳이므로 app.module.ts는 다음과 같아야 합니다.

코드 스니펫 - app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

이제 자동 완성 앱에서 사용할 데이터를 생성해야 합니다. 터미널에서 project 폴더 내부에 ng g s auto를 사용하여 service 파일을 설치합니다.

파일은 src » app 폴더 내의 구성 요소 파일 사이에 있어야 합니다. 파일로 이동하여 다음 코드를 입력합니다.

코드 스니펫 - auto.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AutoService {
  private baseURL = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(this.baseURL);
  }
}

service 파일 내에서 데이터를 가져올 URL을 선언하고 getData() 함수를 사용하여 데이터를 가져옵니다.

웹 페이지를 아름답게 만들기 위해 다음과 같이 app.component.ts 파일에 아래 스타일을 추가할 수 있습니다.

코드 스니펫 - app.component.css:

.card {
    width: 100%;
    display: inline-block;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  }
  .title {
      margin-top: 0px;
  }
  .purple, .blue, .red, .orange, .green {
    color: #fff;
  }
  .purple {
    background: #5133AB;
  }

출력:

![REST API 및 Bootstrap을 사용하여 AngularJS 자동 완성](</img/Angular/angularjs는 Rest API 및 bootstrap.gif>를 사용하여 자동 완성

ng-autocomplete 모듈을 사용하여 AngularJS 자동 완성 구현

이 방법을 사용하여 Angular autocomplete 모듈을 설치합니다. 새 프로젝트 폴더를 만든 후 npm install angular-ng-autocomplete를 사용하여 새 Angular 모듈을 설치합니다.

그런 다음 npmjs.com/package/angular-ng-autocomplete로 이동하여 아래와 같이 사용 샘플을 app.component.html 파일에 복사합니다.

코드 스니펫 - app.component.html:

<h1>{{title}}</h1>
<div class="ng-autocomplete">
  <ng-autocomplete
    [data]="data"
    [searchKeyword]="keyword"
    (selected)='selectEvent($event)'
    (inputChanged)='onChangeSearch($event)'
    (inputFocused)='onFocused($event)'
    [itemTemplate]="itemTemplate"
    [notFoundTemplate]="notFoundTemplate">
  </ng-autocomplete>
  <ng-template #itemTemplate let-item>
  <a [innerHTML]="item.name"></a>
  </ng-template>
  <ng-template #notFoundTemplate let-notFound>
  <div [innerHTML]="notFound"></div>
  </ng-template>
  </div>

그런 다음 app.component.ts 파일 내에서 자동 완성 웹 앱 내에서 사용할 이름 목록을 아래와 같이 배열 형식으로 만듭니다.

코드 스니펫 - app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    '.ng-autocomplete {position: fixed; /* or absolute */ top: 50%; left: 20%;}'
  ]
})
export class AppComponent {
  title = 'Angular Autocomplete';
  keyword = 'name';
  data = [
     {
       id: 1,
       name: 'Usa'
     },
     {
       id: 2,
       name: 'England'
     },
     {
       id: 3,
       name: 'India'
     },
     {
       id: 4,
       name: 'africa'
     },
     {
       id: 5,
       name: 'nigeria'
     },
     {
       id: 6,
       name: 'albania'
     },
     {
       id: 7,
       name: 'madagascar'
     }
  ];
  selectEvent(item: any) {
    console.log('selected item '+item.name);
  }
  onChangeSearch(val: string) {
    console.log('selected val '+val);
  }
  onFocused(e: any){
  }
}

검색 표시줄을 클릭하면 onFocused 이벤트 핸들러가 활성화되고 selectEvent 기능이 목록에서 선택한 항목을 표시합니다.

그런 다음 app.module.ts 내부에서 아래와 같이 이전에 설치한 모듈을 가져옵니다.

코드 스니펫 - app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {AutocompleteLibModule} from 'angular-ng-autocomplete';

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

출력:

ng-autocomplete 모듈을 사용한 AngularJS 자동 완성

Angular Material을 사용하여 AngularJS 자동 완성 구현

Angular 자료는 웹 애플리케이션에 바로 사용할 수 있는 Angular 구성 요소를 제공하며 이 예제에서는 자동 완성 모듈을 사용합니다.

새 project 폴더를 생성한 후 project 폴더로 이동하여 ng add @angular/material을 사용하여 Angular 자료를 설치합니다. 그런 다음 material.angular.io를 방문하여 시작하기, 구성 요소를 클릭하고 자동 완성을 선택합니다.

예제 탭에서 States에 대한 항목을 사용하므로 아래와 같이 HTML 코드 스니펫을 app.component.html에 복사합니다.

코드 스니펫 - app.component.html:

<form [formGroup]="stateForm">
  <mat-form-field appearance="fill">
    <mat-label>States Group</mat-label>
    <input type="text"
           matInput
           formControlName="stateGroup"
           required
           [matAutocomplete]="autoGroup">
      <mat-autocomplete #autoGroup="matAutocomplete">
        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
          <mat-option *ngFor="let name of group.names" [value]="name">
            {{name}}
          </mat-option>
      </mat-optgroup>
    </mat-autocomplete>
  </mat-form-field>
</form>

이것은 우리 페이지의 구조, 정확히 말해서 States 검색 표시줄을 만듭니다.

그런 다음 app.module.ts 내부에서 autocomplete 구성 요소에 대한 모듈, 상태 목록의 양식 필드를 입력 모듈로 가져옵니다. 파일은 아래와 같이 표시됩니다.

코드 스니펫 - app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatAutocompleteModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatFormFieldModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts 파일은 애플리케이션의 기본 코드를 보유합니다. 그래도 Angular 웹사이트에서는 States 예제의 TS 코드 스니펫을 복사하여 AppComponent의 export 클래스에 넣습니다.

그 전에 TS 코드 스니펫의 첫 번째 부분인 내보내기 인터페이스 StateGroup을 가져오기 바로 뒤에 복사합니다. app.component.ts 파일에는 아래와 같은 코드가 있어야 합니다.

코드 스니펫 - app.component.ts:

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

export interface StateGroup {
  letter: string;
  names: string[];
}
export const _filter = (opt: string[], value: string): string[] => {
  const filterValue = value.toLowerCase();

  return opt.filter(item => item.toLowerCase().includes(filterValue));
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'autocomnine';
  stateForm = this._formBuilder.group({
    stateGroup: '',
  });

  stateGroups: StateGroup[] = [
    {
      letter: 'A',
      names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas'],
    },
    {
      letter: 'C',
      names: ['California', 'Colorado', 'Connecticut'],
    },
    {
      letter: 'D',
      names: ['Delaware'],
    },
    {
      letter: 'F',
      names: ['Florida'],
    },
    {
      letter: 'G',
      names: ['Georgia'],
    },
    {
      letter: 'H',
      names: ['Hawaii'],
    },
    {
      letter: 'I',
      names: ['Idaho', 'Illinois', 'Indiana', 'Iowa'],
    },
    {
      letter: 'K',
      names: ['Kansas', 'Kentucky'],
    },
    {
      letter: 'L',
      names: ['Louisiana'],
    },
    {
      letter: 'M',
      names: [
        'Maine',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
      ],
    },
    {
      letter: 'N',
      names: [
        'Nebraska',
        'Nevada',
        'New Hampshire',
        'New Jersey',
        'New Mexico',
        'New York',
        'North Carolina',
        'North Dakota',
      ],
    },
    {
      letter: 'O',
      names: ['Ohio', 'Oklahoma', 'Oregon'],
    },
    {
      letter: 'P',
      names: ['Pennsylvania'],
    },
    {
      letter: 'R',
      names: ['Rhode Island'],
    },
    {
      letter: 'S',
      names: ['South Carolina', 'South Dakota'],
    },
    {
      letter: 'T',
      names: ['Tennessee', 'Texas'],
    },
    {
      letter: 'U',
      names: ['Utah'],
    },
    {
      letter: 'V',
      names: ['Vermont', 'Virginia'],
    },
    {
      letter: 'W',
      names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming'],
    },
  ];
  stateGroupOptions: Observable<StateGroup[]>;
  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges.pipe(
      startWith(''),
      map(value => this._filterGroup(value || '')),
    );
  }
  private _filterGroup(value: string): StateGroup[] {
    if (value) {
      return this.stateGroups
        .map(group => ({letter: group.letter, names: _filter(group.names, value)}))
        .filter(group => group.names.length > 0);
    }
    return this.stateGroups;
  }
}

출력:

Angular 재료를 사용한 AngularJS 자동 완성

여기에서 상태 이름을 나열한 다음 ngOnInit()을 사용하여 검색 표시줄에 초점을 맞추면 목록을 활성화합니다. 그런 다음 _filterGroup 기능은 검색 표시줄에 입력한 각 문자로 가장 가까운 주를 제안합니다.

결론

논의한 방법을 사용하여 자동 완성 기능을 다르게 적용할 수 있습니다. 또한 많은 상황, 특히 대용량 데이터를 처리할 때 자동완성 기능을 적용할 수 있습니다.

작가: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

관련 문장 - Angular Bootstrap