Autocomplete

How to set up an Autocomplete dropdown menu in ChronoForms with dynamic filtering.

Overview

The problem is that the Autocomplete dropdown initially displayed all options or none because the Read Data action was not filtering results based on the user's input, and the returned data was not being properly formatted for the dropdown.
Set up a separate page with a different Page Group, add a Read Data action to return all records, and use a PHP action to format the data as key-value pairs. Then, modify the Read Data to filter results using a LIKE statement with a PHP action that adds wildcards to the user's input, ensuring the dropdown updates correctly as the user types.

Answered
ChronoForms v8

Is there an instructional for creating and Autocomplete Dropdown menu?I've found the "Autocomplete" Behaviour and directed it to a different page.I've setup the new page and added a "Read Data"

I need to setup a "Return an array of Key/Value pairs" and the custom code to transfer that back to the dropdown menu.

Thanks in advance

Max_admin Max_admin 21d ago

The other page must have a different Page Group

Then, at the other page, setup your Read Data to return All Records, then add a PHP action after the Read Data and use this code:

$values = [];
foreach($this->get("read_data_name") as $k => $row){
	$values[] = ["value" => $row["id"], "text" => $row["name"]]; //change "id" and "name" to match the row fields you want to use for the selections value & text
}

return json_encode($values);

Let me know how this works

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

Thank you so much for that...

The dropdown remains unresponsive.

I've moved the read data and php into the main page to "debug" what information is coming back:

[namelistb] => Array
        (
            [returned] => [{"value":"123456789","text":"First Last"},{"value":"987654321","text":"Last First"}]

It seems like I should be putting something in the dropdown "Options" box but I'm not sure what?

I put {var:namelist} (the b refers to the one in the "load page" not the "Read Data" page) and I can select the box and start typing, but the list is blank.

If I put {var:namelistb} it makes the list display the following as a single option to select

[{"value":"123456789","text":"First Last"},{"value":"987654321","text":"Last First"}]

These are the correct value:test results I'm looking for, but it's displaing the entire varible as one input rather than seperating them into different selectable options.

I'm not sure if the AutoComplete page is triggering or what should be in the Dropdown "Options" box???

I've entered "AutoComplete" as the page Title, Alias & Group

I've changed the PHP code to"

$values = [];
foreach($this->get("read_studentdetails") as $k => $row){
    $values[] = ["value" => $row["Licence"],"text" => $row["Name"]
    ];
}
echo json_encode($values);

Now when I type in the Dropdown Menu the list apprears properly, but it only eliminates the options that don't match for a moment until I stop typing and then the full list reutrns.

Max_admin Max_admin 19d ago
Answer

You mean the link you have on the other topic ?

For AutoComplete you will need to modify your Read Data to return a limited number of results based on the passed field value, on that form the AutoComplete field name is "student", so you need to use {data:student} in the where statement of your Read Data:

LIKE {data:student}

But because you need to use % for the matching, you will need a PHP action to modify the value before Read Data:

return "%".$this->data("student")."%";

then in Read Data:

LIKE {var:php_name}
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
U U Can Drive 19d ago
1 Likes

Thank you so much...

The Where statement just needed a slight adjustment:

Name LIKE '{var:searchname}'

Max_admin Max_admin 13d ago

Great, no problem.

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Post a Reply