Usage and features

Usage and features

Two block templates are included, default and another that has the autocomplete incorporated into concrete's own search function so if no term can be found and the form is submitted it run behave as a normal concrete search block.

  1. A field to add in parameters to set up your auto complete settings (An example of this can be seen below).
  2. A field to add custom css should you need to in order to further style the search field
  3. Set number limit for number of results to display **cannot be left blank
  4. Select a theme default, dark or colored
  5. Span across 100% width if required.

Example of parameters settings to paste in on the block edit are below.

There are two elements the text part and the link part. Be sure to make certain you include any brackets and comma's as per the example entries are not restricted but you should keep in mind that extremely long lists from a user perspective may not be practical so keep your number to a reasonable amount. For ease of use and best practice I recommend editing the below text by copying and pasting into a plain text editor such as notepad on PC or text editor on mac, then copying and pasting from there into the blocks parameter field in edit mode.

Please visit the examples page to see the block in action to see if it fits your needs at: https://rw.jibbajabba.uk.com/earlyyears/index.php/autocomplete

Setting the Parameters:

The plugin works by embedding some json formatted data withing the page for the auto complete to bring in and display within a drop down linked to the search. Don't worry if that sounds complicated as it really isn't. All it means is you have format your listing in a specific way. An example is below. Note each entry is enclosed within {} with a comma seperating them from the next entry. Within that there are two elements the 'website-link' and 'text'. The website link is the url you want it to go to. **note if the pages are on the same site then you dont have to put in the 'https://websiteaddress.com' part of it so instead of 'https://websiteaddress.com/yourpage', you can instead do ''/yourpage''

You can also link to elements that have an 'id' on the page for example to go  to another page on your your website and a specific point on that page was a heading that that had the id 'letsgo' applied to it then your link would be '/yourpage#letsgo'. An example is below. Should typing not be your thing you can use my free tool to get your own param text to copy and paste in, it does the formatting for you so you dont have to worry about it. Visit https://rw.jibbajabba.uk.com/earlyyears/autocompletesetuptool.php

Example Parameters: 

{ "website-link": "https://pbx4cloud.com/3cx", "text": "Hosted 3CX"},
{ "website-link": "https://pbx4cloud.com/3cx", "text": "3CX Phone System"},
{ "website-link": "https://pbx4cloud.com/3cx", "text": "3CX Auto Answer"},
{ "website-link": "https://pbx4cloud.com/3cx", "text": "3CX Autodialler"},
{ "website-link": "https://pbx4cloud.com/3cx", "text": "3CX App"}