AngularJS で検索ボックスを作成する

Oluwafisayo Oluwatayo 2024年2月15日

Angular Angular Search Box

AngularJS で Angular マテリアルを使用してアイコン付きの検索ボックスを作成する
AngularJS で Font-Awesome を使用してアイコン付きの検索ボックスを作成する
まとめ

入力バー内にプレースホルダーを実装する主な理由は、入力フィールドに何を入力する必要があるかをユーザーが理解できるようにするためです。検索フィールドの場合、代わりにプレースホルダーの代わりに検索アイコンをデザインできます。

検索デザインは、そんな発想でより大人っぽいルック＆フィールに。また、検索アイコンをクリック可能にすることで、検索アイコンを通常の検索アイコンに置き換えることができます。

Angular フレームワーク内のアイコンを使用して検索ボックスを実装する方法を見てみましょう。

AngularJS で Angular マテリアルを使用してアイコン付きの検索ボックスを作成する

Angular マテリアルは、Web ページ用の使いやすいコンポーネントとアイコンを提供します。この例ではそれを実装します。

VS Code 内のターミナルを使用して、新しい Angular プロジェクトを作成することから始め、プロジェクトフォルダーに移動し、ng add @angular/material を使用して material モジュールをインストールします。

次に、app.component.html に移動して、これらのコードを記述します。

コードスニペット - app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <span matPrefix> </span>
    <input type="tel" matInput placeholder="Search" name="search" [(ngModel)]="search">
    <button matSuffix mat-button>
      <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>
  <br />
  {{search}}
</form>

matSuffix は入力フィールドの後に検索アイコンを配置し、mat-icon を使用して検索アイコンを作成します。

次に、検索アイコンを機能させるモジュールをインポートします。 app.module.ts ファイルは次のようになります。

コードスニペット - app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

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

出力：

AngularJS で Font-Awesome を使用してアイコン付きの検索ボックスを作成する

Font-Awesome はあらゆる種類のアイコンを入手できる一番の場所であるため、検索アイコン用の Font-Awesome CSS リンクをインポートする必要があります。

cdnjs.com/libraries/angular.js にアクセスし、プロジェクトアプリの app.component.html ファイルの上部に CSS URL をコピーします。次に、fontawesome.com から検索するための CSS クラスを追加します。

次に、残りのコードを次のように追加します。

コードスニペット - app.component.html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sample" >
  <div class="sample ten">
    <input type="text" name="search" ng-model="search.$" placeholder="search">
    <button type="submit" class="btn btn-search">
      <i class="fa fa-search"></i>
    </button>
    <button type="reset" class="btn btn-reset fa fa-times"></button>
  </div>
  <br>
</div>

次に、以下のように CSS スタイルを追加します。

コードスニペット - css:

* {
  box-sizing: border-box;
}

html,
body {
  font-size: 12px;
}

input {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 30px;
  padding: 4px 8px;
  position: absolute;
  width: 50%;
}
input:focus {
  outline: none;
}

button {
  text-align: center;
}
button:focus {
  outline: none;
}
button.btn-search, button.btn-reset {
  background: #568683;
  border: none;
  height: 30px;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  width: 30px;
}

.sample {
  float: left;
  height: 50px;
  margin: 0 8%;
  position: relative;
  width: 34%;
}
.sample.ten input {
  border-radius: 15px;
  transition: all .6s ease-in-out .3s;
  width: 120px;
}
.sample.ten input:focus {
  transition-delay: 0;
  width: 200px;
}
.sample.ten input:focus ~ button {
  transform: rotateZ(360deg);
}
.sample.ten input:focus ~ button.btn-search {
  background: #568683;
  color: #fff;
  left: 172px;
  transition-delay: 0;
}
.sample.ten input:focus ~ button.btn-reset {
  left: 202px;
  transition-delay: .3s;
}
.sample.ten button {
  transition: all .6s ease-in-out;
}
.sample.ten button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  left: 92px;
  top: 2px;
  transition-delay: .3s;
  width: 26px;
}
.sample.ten button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 92px;
  line-height: 20px;
  padding: 0;
  top: 5px;
  width: 20px;
  z-index: -1;
}

出力：

まとめ

アイコン付きの検索ボックスを作成することは、入力フィールドの目的を訪問者に知らせる非常に微妙な方法であり、送信ボタンとしても機能し、Web ページに他のコンテンツ用のスペースを与えることができます。

著者： Oluwafisayo Oluwatayo

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.