This extension adds autocomplete functionality to TYPO3 indexed search fields.
- Supports TYPO3 12 and 13
- No further dependencies
- Comes with limited styling for easy customizability
The recommended way to install Autocomplete for IndexedSearch is by using Composer:
composer require rkl/autocomplete-for-indexedsearch- Go to Site Management -> TypoScript
- Open your TypoScript template and click "Edit the whole TypoScript record"
- In the tab "Advanced Options", include the TypoScript set: "Autocomplete for Indexed Search (autocomplete_for_indexedsearch)"
- Copy the partial from
EXT:indexed_search/Resources/Private/Partials/Form.htmlto your own site package, for example toEXT:my_sitepackage/Resources/Private/IndexedSearch/Partials/Form.html - Add your partial root path to the plugin configuration of Indexed Search in the TypoScript of your site package:
plugin {
tx_indexedsearch {
view {
partialRootPaths.200 = EXT:site_package/Resources/Private/IndexedSearch/Partials/
}
}
}
Add the ViewHelper <rkl:autocompleteSuggestions /> to your overridden Form.html. It renders the container in which suggestions will be displayed.
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:rkl="http://typo3.org/ns/RKL/AutocompleteForIndexedSearch/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<!-- ... -->
<rkl:autocompleteSuggestions searchonclick="0" minlength="2" />Add the ViewHelper wherever it suits your styling needs the best. Ideally it's placed close to the search field. Also remember to add the namespace RKL/AutocompleteForIndexedSearch/ViewHelpers like shown in the example.
The autocompleteSuggestions ViewHelper provides the following attributes to manipulate the behavior of the autocomplete suggestions:
| Attribute | Allowed values | Description |
|---|---|---|
| searchonclick | bool (0/1) |
defines whether to instantly submit the search form when a suggestion is clicked |
| minlength | int | minimum string length of the search term for autocompletion to start |
For prettier autocomplete URLs you can add the autocomplete page type to your routeEnhancers:
routeEnhancers:
PageTypeSuffix:
type: PageType
index: ''
map:
search-autocomplete: 7603976PayPal: www.paypal.me/rukling