README

TYPO3 Extension indexed_search_autocomplete

Extends the TYPO3 Core Extension Indexed_Search searchform with an autocomplete feature.

Minimal Dependencies

• TYPO3 CMS 13.4 & 14.x
• PHP 8.2+
• Plain JavaScript

Quick Install Guide

Install the TYPO3 Core indexed_search extensions

Step 1: The extension works with the TYPO3 Core indexed_search extension. So please install and configure this one first. Check final, the "Word Index" works fine!

Step 2: Install this plugin.

Installation using Composer

The recommended way to install the extension is using Composer.

Run the following command within your Composer based TYPO3 project:

composer require id/indexed-search-autocomplete

Installation as extension from TYPO3 Extension Repository (TER)

Download and install the extension with the extension manager module.

Step 3: No manual TypoScript activation is required — constants and setup (including the AJAX PAGE endpoint, typeNum 7423794) are loaded globally by the extension's ext_localconf.php. Activating the Site Set in Site Management > Sites > Edit your site > Sets > Add: "IndexedSearch Autocomplete" is optional (site-scoped overrides of the view paths).

Step 4: Outsource from the EXT:indexed_search the Partials/Form.html Template. Like this:

plugin {
  tx_indexedsearch {
    view {
      templateRootPath = fileadmin/Resources/Plugin/IndexedSearch/Private/Templates/
      partialRootPath = fileadmin/Resources/Plugin/IndexedSearch/Private/Partials/
      layoutRootPath = fileadmin/Resources/Plugin/IndexedSearch/Private/Layouts/
    }
  }
}

Step 5: Find the fluid file / code line that contains the text-input for the search-word.

Step 6: Add the class '.indexed-search-autocomplete-sword' to this text-input. Example:

<f:form.textfield name="search[sword]" value="{sword}" id="tx-indexedsearch-searchbox-sword" class="tx-indexedsearch-searchbox-sword indexed-search-autocomplete-sword" />

Step 7: Now add the following line where you want the results to be displayed (so in most of the cases below the text-input):

TYPO3 13.x & 14.x:

<div class="search-autocomplete-results no-results" data-mode="word" data-searchonclick="false" data-maxresults="10" data-minlength="2" data-searchurl="{f:uri.action(action: 'search', controller: 'Search', extensionName: 'IndexedSearchAutocomplete', pluginName: 'Search', pageType: '7423794', noCache: 1)}"></div>

Form.html Example TYPO3 v13.x & v14.x:

<div class="tx-indexedsearch-form">
  <label for="tx-indexedsearch-searchbox-sword"><f:translate key="form.searchFor" />:</label>
  <f:form.textfield name="search[sword]" value="{sword}" id="tx-indexedsearch-searchbox-sword" class="tx-indexedsearch-searchbox-sword indexed-search-autocomplete-sword" />
  <div class="search-autocomplete-results no-results" data-mode="word" data-searchonclick="false" data-maxresults="10" data-minlength="2" data-searchurl="{f:uri.action(action: 'search', controller: 'Search', extensionName: 'IndexedSearchAutocomplete', pluginName: 'Search', pageType: '7423794', noCache: 1)}"></div>
</div>

Step 8: Now you can configure the plugins options with the parameters of that <div> (see options)

Step 9: TYPO3 Site-Config add the new PAGE typeNum 7423794, here a Example:

routeEnhancers:
  PageTypeSuffix:
   type: PageType
   default: /
   index: ''
   map:
     /: 0
     sitemap.xml: 500001
     autocomplete: 7423794

Additional: Make sure to disable Indexed-Search option "Use MySQL specific fulltext search", otherwise the word-suggestion won't work!

Options

• data-mode="word" => the following values are possible: word or link. Depending on which option you choose, the plugin will suggest either words or links as you type. You can edit both template files at indexed_search_autocomplete/Resources/Private/Partials/ (Fluid)
• data-maxresults="10" => The maximum number of entries per suggestion (Fluid)
• data-minlength="2" => How many characters must be in the input field for the plugin to make it's first suggestion (Fluid)
• data-searchonclick="false" => If a suggestion is selected, should this submit the form (so basically the search starts after selecting a word). Possible values are "false" or "true".

Contact & Communication

Working / Testing Developer Example:

TYPO3 11: https://t11.baukasten-typo3.de/
TYPO3 12: https://t12.baukasten-typo3.de/
TYPO3 13: https://t13.baukasten-typo3.de/
TYPO3 14: https://t14.baukasten-typo3.de/

GIT

We are on github:
https://github.com/ingeniumdesign/indexed_search_autocomplete/

Agency

INGENIUMDESIGN
TYPO3 - Agentur
65510 Idstein

https://www.ingeniumdesign.de/
info@ingeniumdesign.de

Donate

Amazon: https://www.amazon.de/hz/wishlist/ls/13RT2BFNRP05
PayPay: www.paypal.me/INGENIUMDESIGN/

Sponsoring

https://www.ingeniumdesign.de/ - INGENIUMDESIGN
https://www.agenturamwasser.ch/ - Agentur am Wasser GmbH
https://www.baukasten-typo3.de/ - INGENIUMDESIGN
https://www.smallprime.ch/ - Agentur am Wasser GmbH
https://www.takeoffmedia.de/ - Takeoff-Media GmbH
https://ead.darmstadt.de/ - Eigenbetrieb für kommunale Aufgaben und Dienstleistungen (EAD)
https://www.easy-sprachreisen.de/ - Sebastian Ernst & Petra Wagner GbR

Downloads

TYPO3 TER: https://extensions.typo3.org/extension/indexed_search_autocomplete
Composer: https://packagist.org/packages/id/indexed-search-autocomplete

Used by

We are searching for Live-Examples and for Sponsoring for the TYPO3 indexed_search Autocomplete Extension.
Please be so kind to send us an E-Mail if you're using it. Thanks!

Links/References:

https://www.ingeniumdesign.de/ - by INGENIUMDESIGN
https://www.baukasten-typo3.de/ - by INGENIUMDESIGN
https://www.takeoffmedia.de/ - by INGENIUMDESIGN
https://ead.darmstadt.de/ - by INGENIUMDESIGN
https://www.easy-sprachreisen.de/ - by INGENIUMDESIGN