Skip to content

Commit

Permalink
docs: explain additional template properties (active, index, searchTerm)
Browse files Browse the repository at this point in the history
  • Loading branch information
mxlje committed Jul 6, 2021
1 parent 46dfc02 commit fcb8647
Showing 1 changed file with 13 additions and 1 deletion.
14 changes: 13 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ Similar to the string template mentioned above, you can use the row template to
</ge-autocomplete>
```

**Pro Tip™:** Use the `item.active` property to check if the current row is being hovered over or activated via arrow keys.
**Pro Tip™:** Use the `item.active` property to check if the current row is being hovered over or activated via arrow keys. See below for additional properties.

The example above could render a little flag icon for the result’s country, for example. You can customize the styling by defining custom classes in the same way you would customize the CSS variables. It’s best to prefix your classes to avoid conflicts with internal classnames of the element.

Expand All @@ -184,6 +184,18 @@ The [lodash template language][_template] supports much more than just straight
[_template]: https://lodash.com/docs/4.17.15#template


### Additional Template Properties

Inside a template you can access the following properties:

|Property|Type|Contains|
|--------|----|--------|
|`item.feature`|Object|The selected item, a [GeoJSON Feature][geojsonfeature]|
|`item.active`|Boolean|Whether or not the current item is active (hovered or selected with arrow keys)|
|`item.searchTerm`|String|The current value of the search input field|
|`item.index`|Number|The index of the item in the result list|

[geojsonfeature]: https://github.com/geocodeearth/core-js/blob/main/src/geojson.ts

## Example

Expand Down

0 comments on commit fcb8647

Please sign in to comment.