tapp / filament-google-autocomplete-field
Filament 插件,提供 Google 自动完成字段
Requires
- php: ^8.2
- filament/filament: ^3.0-stable
- illuminate/contracts: ^10.0||^11.0
- skagarwal/google-places-api: ^2.2
- spatie/laravel-package-tools: ^1.16
Requires (Dev)
- larastan/larastan: ^2.9
- laravel/pint: ^1.14
- nunomaduro/collision: ^8.1.1||^7.10.0
- orchestra/testbench: ^9.0.0||^8.22.0
- pestphp/pest: ^2.34
- pestphp/pest-plugin-arch: ^2.7
- pestphp/pest-plugin-laravel: ^2.3
- pestphp/pest-plugin-livewire: ^2.1
- phpstan/extension-installer: ^1.3
- phpstan/phpstan-deprecation-rules: ^1.1
- phpstan/phpstan-phpunit: ^1.3
- spatie/laravel-ray: ^1.35
This package is auto-updated.
Last update: 2024-09-05 18:38:52 UTC
README
此插件通过使用 Google 地点自动完成 API 提供地址自动完成功能,地址字段可完全自定义。
注意
使用 Google 地点 API 包 向 Google 地点发送 API 请求。
安装
您可以通过 composer 安装此包
composer require tapp/filament-google-autocomplete-field
您可以使用以下命令发布配置文件
php artisan vendor:publish --tag="filament-google-autocomplete-field-config"
这是发布配置文件的内容
return [ 'api-key' => env('GOOGLE_PLACES_API_KEY', ''), ];
可选地,您可以使用以下命令发布翻译文件
php artisan vendor:publish --tag="filament-google-autocomplete-field-translations"
设置
在 Google 控制台 中,创建一个应用程序并启用地点 API。
- 点击“启用 API 和服务”
- 搜索“地点 API”
- 点击启用它
- 获取 API 密钥
在您的 Laravel 应用程序中,将 Google API 密钥添加到 GOOGLE_PLACES_API_KEY
的 .env
文件中
GOOGLE_PLACES_API_KEY=your_google_place_api_key_here
外观
用法
将 GoogleAutocomplete
字段添加到您的表单中
use Tapp\FilamentGoogleAutocomplete\Forms\Components\GoogleAutocomplete; GoogleAutocomplete::make('google_search'),
这将使用默认的地址字段和 Google API 选项。您还可以自定义地址字段和 Google 地点 API 选项。有关所有可用选项,请参阅下方的 可用选项
项。例如
use Tapp\FilamentGoogleAutocomplete\Forms\Components\GoogleAutocomplete; GoogleAutocomplete::make('google_search') ->label('Google look-up') ->countries([ 'US', 'AU', ]) ->language('pt-BR') ->withFields([ Forms\Components\TextInput::make('address') ->extraInputAttributes([ 'data-google-field' => '{street_number} {route}, {sublocality_level_1}', ]), Forms\Components\TextInput::make('country'), Forms\Components\TextInput::make('coordinates') ->extraInputAttributes([ 'data-google-field' => '{latitude}, {longitude}', ]), ]),
可用选项
自动完成字段
您可以使用 withFields
方法来定义要自动完成的字段。
如果没有提供此方法,则默认设置以下字段
Forms\Components\TextInput::make('address') ->extraInputAttributes([ 'data-google-field' => '{street_number} {route}, {sublocality_level_1}', ]), Forms\Components\TextInput::make('city') ->extraInputAttributes([ 'data-google-field' => 'locality', ]), Forms\Components\TextInput::make('country'), Forms\Components\TextInput::make('zip') ->extraInputAttributes([ 'data-google-field' => 'postal_code', ]),
您可以通过将 Filament 表单字段数组传递给 withFields
方法来覆盖这些默认字段
GoogleAutocompleteFields::make('google_search') ->withFields([ Forms\Components\TextInput::make('address') ->extraInputAttributes([ 'data-google-field' => '{street_number} {route}, {sublocality_level_1}', ]), Forms\Components\TextInput::make('city') ->extraInputAttributes([ 'data-google-field' => 'locality', ]), ]),
字段组合
您可以使用花括号 {}
将 Google API 返回的多个字段组合到一个字段中,将字段包装在 'data-google-field'
额外输入属性中。例如,下面的 address
字段将包含 street_number
、route
和 sublocality_level_1
,而 coordinates
字段将包含 latitude
和 longitude
字段
Forms\Components\TextInput::make('address') ->extraInputAttributes([ 'data-google-field' => '{street_number} {route}, {sublocality_level_1}', ]), Forms\Components\TextInput::make('coordinates') ->extraInputAttributes([ 'data-google-field' => '{latitude},{longitude}', ]),
字段名称
如果您的数据库字段名称与 Google 字段不同(例如,您的数据库字段是 zip
,您想使用 API 返回的 Google 的 postal_code
值),您可以通过将数据库字段名称传递到 extraInputAttributes
方法中的 'data-google-field'
来将 API 字段与数据库字段关联起来
Forms\Components\TextInput::make('zip') ->extraInputAttributes([ 'data-google-field' => 'postal_code', ])
以下是可以使用的 Google 元数据字段名称
street_number,
route,
locality,
sublocality_level_1,
administrative_area_level_2,
administrative_area_level_1,
country,
postal_code,
place_id,
formatted_address,
formatted_phone_number,
international_phone_number,
name,
website,
latitude,
longitude,
long_name 和 short_name
Google 的地点 API 为地址字段返回 long_name
和 short_name
值。您可以通过传递到 extraInputAttributes
方法中的 'data-google-value'
来选择要显示的值
Forms\Components\TextInput::make('country') ->extraInputAttributes([ 'data-google-value' => 'short_name', ])
以下是 Google API 返回的 long_name
和 short_name
数据的示例
"street_number" => [ "long_name" => "1535" "short_name" => "1535" ] "route" => [ "long_name" => "Broadway" "short_name" => "Broadway" ] "locality" => [ "long_name" => "New York" "short_name" => "New York" ] "sublocality_level_1" => [ "long_name" => "Manhattan" "short_name" => "Manhattan" ] "administrative_area_level_2" => [ "long_name" => "New York County" "short_name" => "New York County" ] "administrative_area_level_1" => [ "long_name" => "New York" "short_name" => "NY" ] "country" => [ "long_name" => "United States" "short_name" => "US" ] "postal_code" => [ "long_name" => "10036" "short_name" => "10036" ]
自动完成字段列宽
自动完成选择字段的默认列宽为'full'
。您可以使用autocompleteFieldColumnSpan
方法定义其他值(与Filament的columnSpan()
支持相同)。
GoogleAutocomplete::make('google_search') ->autocompleteFieldColumnSpan(1)
自动完成字段搜索防抖
默认搜索防抖时间为2秒,以避免对Google Places API发起过多请求。您可以使用autocompleteSearchDebounce
方法定义其他值。
GoogleAutocomplete::make('google_search') ->autocompleteSearchDebounce(1000) // 1 second
以下这些Google API选项可以传递给GoogleAutocomplete
字段。
国家
添加countries
方法以限制用于自动完成搜索的国家。
国家必须以两个字符的ISO 3166-1 Alpha-2兼容国家代码传递。您可以在维基百科:ISO 3166国家代码列表中找到可用的国家代码。
GoogleAutocomplete::make('google_search') ->countries([ 'US', 'AU', ])
语言
返回结果的应使用语言。这些是受支持的语言代码。
GoogleAutocomplete::make('google_search') ->language('pt-BR')
位置
检索地点信息的点,以latitude,longitude
的形式。
请参阅Google文档以了解此选项的详细说明。
GoogleAutocomplete::make('google_search') ->location(40.7585862,-73.9858202)
位置偏置
通过指定半径加lat/lng或表示矩形顶点的两个lat/lng对,优先考虑指定区域内的结果。如果未指定此参数,则API默认使用IP地址偏置。
请参阅Google文档以了解此选项的详细说明。
位置限制
通过指定半径加lat/lng或表示矩形顶点的两个lat/lng对,限制结果到指定区域。
请参阅Google文档以了解此选项的详细说明。
偏移
服务用于匹配预测的输入词中最后一个字符的位置。例如,如果输入是Google且偏移为3,则服务将在Goo上进行匹配。
GoogleAutocomplete::make('google_search') ->offset(5)
起点
计算到指定目的地直线距离的起点,以latitude,longitude
的形式。
请参阅Google文档以了解此选项的详细说明。
GoogleAutocomplete::make('google_search') ->origin(40.7585862,-73.9858202)
半径
返回地点结果的范围,单位为米。
请参阅Google文档以了解此选项的详细说明。
GoogleAutocomplete::make('google_search') ->radius(10)
区域
区域代码,指定为国家代码顶级域名(ccTLD)的两个字符值。
GoogleAutocomplete::make('google_search') ->region('uk')
会话令牌
随机字符串,用于识别用于计费的自动完成会话。
请参阅Google文档以了解此选项的详细说明。
地点类型
限制结果为特定类型。将可用类型作为数组传递。
GoogleAutocomplete::make('google_search') ->placeTypes([ 'lodging', 'book_store', 'florist', ])
请参阅Google文档以了解此选项的详细说明。
测试
composer test
变更日志
请参阅变更日志以获取有关最近更改的更多信息。
贡献
请参阅贡献指南以获取详细信息。
安全漏洞
请查看我们的安全策略,了解如何报告安全漏洞。
致谢
许可
MIT许可(MIT)。请参阅许可文件以获取更多信息。