#LWCで住所を郵便番号検索で自動入力するには
標準コンポーネントであるlightning-input-addressを画面に追加し、「address-lookup-placeholder」をtrueにすると、郵便番号等で検索できるルックアップ欄が出てきてくれます。
ポイント: 自前で郵便番号マスタとか検索ロジックとか作る必要無し!
#動作イメージ
#コード例
<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>
#豆知識
- 住所を構成する各入力欄のラベル(国、郵便番号、都道府県、市区町村、以降の住所)は自由に設定できる。
- 住所を構成する各入力欄の個数は、国項目を除いて増減できない。つまり、「番地と建物名を別項目にしたい」は不可。国項目だけは有無を指定可能。
- ルックアップ欄では、郵便番号だけでなく、日本語の文字(町名や建物名)でも検索可能。