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

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

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

動作イメージ

1. 初期表示
   

2. 郵便番号を入力時
   

3. 郵便番号を選択時
   

コード例

      <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>

豆知識

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