You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guide/form-fields/autocomplete.md
+58-50Lines changed: 58 additions & 50 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,16 +21,55 @@ This method is useful to link the dataset of a local autocomplete (aka: the `loc
21
21
22
22
### `setRemoteEndpoint(string $remoteEndpoint)`
23
23
24
-
The endpoint to hit with mode=remote.
24
+
The remote endpoint which should return JSON-formatted results. Note that you can add the `sharp_auth` middleware to this route to handle authentication and prevent this API endpoint to be called by non-sharp users:
25
25
26
-
If this endpoint is yours (`remote` mode here is useful to avoid loading a lot of data in the view), you can add the `sharp_auth` middleware to the API route to handle authentication and prevent this API endpoint to be called by non-sharp users:
This endpoint MUST be part of your application. If you need to hit an external endpoint, you should create a custom endpoint in your application that will call the external endpoint (be sure to check the alternative `setRemoteCallback` method).
To avoid the pain of writing a new dedicated endpoint, and for simple cases, you can use this method to provide a callback that will be called when the autocomplete field needs to fetch data. The callback will receive the search string as a parameter and should return an array of objects.
The second argument, `$linkedFields`, allows you to provide a list of fields that will be sent with their values to the callback, so you can filter the results based on the values of other fields.
This method allows to call the endpoint / callback with empty search (on first click on the field for example). It's equivalent to `setSearchMinChars(0)`.
72
+
34
73
### `setSearchMinChars(int $searchMinChars)`
35
74
36
75
Set a minimum number of character to type before performing the search.
@@ -61,7 +100,7 @@ Set the remote method to GET (default) or POST.
61
100
In a remote autocomplete case, you can use this method instead of `setRemoteEndpoint` to handle a dynamic URL, based on another form field. Here's how, for example:
Just write the template as a string, using placeholders for data like this: `{{var}}`.
96
-
97
-
Example:
98
-
99
-
```php
100
-
$panel->setInlineTemplate(
101
-
'Foreground: <strong>{{color}}</strong>'
102
-
)
103
-
```
104
-
105
-
The template will be used, depending on the function, to display either the list item (in the result dropdown) or the result item (meaning the valuated form input).
106
-
107
-
Be aware that you'll need for this to work to pass a valuated object to the Autocomplete, as data.
Use this if you need more control: give the path of a full template, in its own file.
113
-
114
-
The template will be [interpreted by Vue.js](https://vuejs.org/v2/guide/syntax.html), meaning you can add data placeholders, DOM structure but also directives, and anything that Vue will parse. For instance:
The template will be used, depending on the function, to display either the list item (in the result dropdown) or the result item (meaning the valuated form input).
122
-
123
-
Be aware that you'll need for this to work to pass a valuated object to the Autocomplete, as data.
135
+
The templates for the list and result items can be set in two ways: either by passing a string, or by passing a Laravel view.
124
136
125
-
### `setAdditionalTemplateData(array $data)`
126
-
127
-
Useful to add some static (or at least not instance-dependant) data to the template. For instance:
137
+
Examples:
128
138
129
139
```php
130
-
SharpFormAutocompleteRemoteField::make('brand')
131
-
->setAdditionalTemplateData([
132
-
'years' => [2020, 1018, 2017]
133
-
]);
134
-
```
135
-
136
-
In the template, the provided data can be used as normal:
0 commit comments