tapp / filament-google-autocomplete-field

Filament 插件,提供 Google 自动完成字段

v1.0.2 2024-08-05 18:28 UTC

This package is auto-updated.

Last update: 2024-09-05 18:38:52 UTC


README

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

此插件通过使用 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。

  1. 点击“启用 API 和服务”
  2. 搜索“地点 API”
  3. 点击启用它
  4. 获取 API 密钥

在您的 Laravel 应用程序中,将 Google API 密钥添加到 GOOGLE_PLACES_API_KEY.env 文件中

GOOGLE_PLACES_API_KEY=your_google_place_api_key_here

外观

Filament Google Autcomplete Field

Filament Google Autcomplete Field

Filament Google Autcomplete Field

Filament Google Autcomplete Field

Filament Google Autcomplete Field

用法

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_numberroutesublocality_level_1,而 coordinates 字段将包含 latitudelongitude 字段

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_nameshort_name 值。您可以通过传递到 extraInputAttributes 方法中的 'data-google-value' 来选择要显示的值

Forms\Components\TextInput::make('country')
    ->extraInputAttributes([
        'data-google-value' => 'short_name',
    ])

以下是 Google API 返回的 long_nameshort_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)。请参阅许可文件以获取更多信息。