RM Autocomplete search field block example

This page shows a basic working examples of the rwautocomplete search field block. For the example forms I have set up autocomplete names and links to a live website that also uses this block. Start typing and you will see autocomplete options load in. If you click on on a link you are taken you directly to that page, you can even give elements on that page an id tag to go directly to that part of the page if you wish by adding # then the id name on the end of the url within the param entries.

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. See further down the page for examples of this

 

Auto complete with 100% width enabled

Auto complete with 100% width enabled

Dark theme

Dark theme

Colored theme

Colored theme

auto complete without width, no button text, default theme


With Concrete search fallback

The below example runs the autocomplete as the above examples but the difference being if it doesn't have any matches and you click or press enter then it will run the same search as concrete's own search block. All of the appearance options above still work the only difference the concrete basic search functionality. To use select the 'Withsearchfunction' template on the advanced block options.

Auto complete with concrete search functionality fallback

Auto complete with concrete search functionality fallback, full width

Auto complete with concrete search functionality fallback, full width

Auto complete with concrete search functionality fallback, full width and dark theme selected

Auto complete with concrete search functionality fallback, full width and dark theme selected

Auto complete with concrete search functionality fallback, full width and colored theme selected

Auto complete with concrete search functionality fallback, full width and colored theme selected


Parameters

Example of parameters settings to paste in on the block edit. 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.

{ "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"},
{ "website-link": "https://pbx4cloud.com/3cx", "text": "Quotation"},
{ "website-link": "https://pbx4cloud.com/sip-trunks", "text": "SIP trunks"},
{ "website-link": "https://pbx4cloud.com/get-3cx-quote", "text": "3CX quote"},
{ "website-link": "https://pbx4cloud.com/3cx", "text": "3CX"},
{ "website-link": "https://pbx4cloud.com/services/hosted-telephony-1", "text": "Hosted Telephony"},
{ "website-link": "https://pbx4cloud.com/services/lines-and-calls", "text": "Lines & Calls"},
{ "website-link": "https://pbx4cloud.com/services/hosted-telephony", "text": "Hosted Telephony Benefits"},
{ "website-link": "https://pbx4cloud.com/3cx/3cx-ms-teams-integration", "text": "3CX MS Teams Integration"},
{ "website-link": "https://pbx4cloud.com/3cx/3cx-ms-teams-integration", "text": "MS teams"},
{ "website-link": "https://pbx4cloud.com/3cx/3cx-inclusive-minutes", "text": "3CX Inclusive Minutes"},
{ "website-link": "https://pbx4cloud.com/3cx/3cx-inclusive-minutes", "text": "Inclusive Minutes"},
{ "website-link": "https://pbx4cloud.com/3cx/hosted-3cx-pbx-pricing", "text": "PBX Pricing"},
{ "website-link": "https://pbx4cloud.com/3cx/hosted-3cx-pbx-pricing", "text": "3CX Pricing"}