Indexed Search Autocomplete

TYPO3 Extension `indexed_search_autocomplete`

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

Minimal Dependencies

TYPO3 CMS 8.7.x - 12.4.x
PHP 7.x - 8.x
Jquery 1.x

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: Include the static TypoScript of the extension in Site Management > Typoscript > Edit the whole TypoScript record > Advanced Options > Include TypoScript sets: Indexed Search Autocomplete (indexed_search_autocomplete)

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 8.x - 10.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', pageType: '7423794', noCache: 1, noCacheHash: 1, extensionName: 'indexedSearchAutocomplete', controller: 'Search')}"></div>

TYPO3 11.x - 12.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', pageType: '7423794', noCache: 1, extensionName: 'indexedSearchAutocomplete', controller: 'Search')}"></div>

Form.html Example TYPO3 v9-10:

<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', pageType: '7423794', noCache: 1, noCacheHash: 1, extensionName: 'indexedSearchAutocomplete', controller: 'Search')}"></div>
</div>

Form.html Example TYPO3 v11-12:

<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', pageType: '7423794', noCache: 1, extensionName: 'indexedSearchAutocomplete', controller: 'Search')}"></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

Enable or Disable the JQuery-Source in the Extension Settings. (Backend -> Extension-Settings) page.includeJSFooterlibs.JquerySource =
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/

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
https://www.radprax.de/ - by wilhelm innovative medien GmbH

RKlingler/indexed_search_autocomplete