12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[Salesforce]LWCで住所を郵便番号検索で自動入力するには

Posted at

#LWCで住所を郵便番号検索で自動入力するには

標準コンポーネントであるlightning-input-addressを画面に追加し、「address-lookup-placeholder」をtrueにすると、郵便番号等で検索できるルックアップ欄が出てきてくれます。

ポイント: 自前で郵便番号マスタとか検索ロジックとか作る必要無し!

#動作イメージ

  1. 初期表示
    image.png

  2. 郵便番号を入力時
    image.png

  3. 郵便番号を選択時
    image.png

#コード例

      <lightning-input-address
        show-address-lookup="true"
        address-lookup-placeholder="🔍住所検索欄"
        address-label="住所"
        street-label="以降の住所"
        city-label="市区町村"
        country-label="国"
        province-label="都道府県"
        postal-code-label="郵便番号"
      ></lightning-input-address>

#豆知識

  • 住所を構成する各入力欄のラベル(国、郵便番号、都道府県、市区町村、以降の住所)は自由に設定できる。
  • 住所を構成する各入力欄の個数は、国項目を除いて増減できない。つまり、「番地と建物名を別項目にしたい」は不可。国項目だけは有無を指定可能。
  • ルックアップ欄では、郵便番号だけでなく、日本語の文字(町名や建物名)でも検索可能。
12
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?