Browse Source

Update AutoCompleteSelect documentation according to review

pull/11957/head
Enis Necipoglu 5 years ago
parent
commit
e3d2034b9e
  1. 43
      docs/en/UI/AspNetCore/AutoComplete-Select.md

43
docs/en/UI/AspNetCore/AutoComplete-Select.md

@ -13,7 +13,23 @@ This is a core feature and it's used by ABP Framework. There is no custom instal
## Usage
A simple is usage is presented below. The select must have `auto-complete-select` class and following attributes:
A simple is usage is presented below.
```html
<select asp-for="Book.AuthorId"
class="auto-complete-select"
data-autocomplete-api-url="/api/app/author"
data-autocomplete-display-property="name"
data-autocomplete-value-property="id"
data-autocomplete-items-property="items"
data-autocomplete-filter-param-name="filter">
<!-- You can define selected option(s) here -->
<option value="@SelectedAuthor.Id">@SelectedAuthor.Name</option>
</select>
```
The select must have `auto-complete-select` class and following attributes:
- `data-autocomplete-api-url`: * API Endpoint url to get select items. **GET** request will be sent to this url.
- `data-autocomplete-display-property`: * Property name to display. _(For example: `name` ot `title`. Property name of entity/dto.)_.
@ -23,21 +39,7 @@ A simple is usage is presented below. The select must have `auto-complete-select
- `data-autocomplete-selected-item-name`: Text to display as selected item.
- `data-autocomplete-parent-selector`: jQuery selector expression for parent DOM. _(If it's in a modal, it's suggested to send modal selector as this parameter)_.
```html
<select asp-for="Book.AuthorId"
class="auto-complete-select"
data-autocomplete-api-url="/api/app/author"
data-autocomplete-display-property="name"
data-autocomplete-value-property="id"
data-autocomplete-items-property="items"
data-autocomplete-filter-param-name="filter">
<!-- You can define selected option(s) here -->
<option value="@SelectedAuthor.Id">@SelectedAuthor.Name</option>
</select>
```
You can define selected option(s) inside select tags. AutoComplete select may can't find selected item if pagination is applied.
Also, selected value(s) should be defined with `<option>` tags inside select, since pagination is applied and selected options might haven't loaded yet.
### Multiple Choices
@ -64,9 +66,6 @@ It'll be automatically binded to an collection of defined value type.
public List<Guid> TagIds { get; set; }
```
## Possible Issues
### Permission Restriction
If the authenticated user doesn't have permission on given url, user will get an authorization error. Be careful while designing this kind of UIs.
You may place a lookup method in the same AppService, so your page can retrieve lookup daha of dependent entity without giving a entire read permission to users.
## Notices
If the authenticated user doesn't have permission on the given URL, the user will get an authorization error. Be careful while designing this kind of UIs.
You may expose a lookup endpoint, so your page can retrieve lookup data of dependent entity without giving entire read permission to users.
Loading…
Cancel
Save