Hi all,
I've set in a dropdown formfield all values from an external DBtable. It works right if I use mouse to open and select the row I need. If I use keyboard to write the value I need the list move on every key I press. So I try to set "minimun characters to autocomplete" to 3 but it didn't works.
Then I add <datalist> on extra attributes and it goes like I suppose.. but: the value selected is not passed on submit.
There's any other thing that I've to set?
Thanks
Marco
Hi Marco,
"the list move on every key I press", how exactly ? which browser did you use for testing ?
Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
Hi Max,
I'm using firefox 53.0.2.
Example:
the dropdown list have this values: marco, andrea, luca, max, pamela, giulio, xante...
If I start to write "m a x" (with keyboard) on the dropdown field it selects Marco, Andrea, Xante...
With <datalist> extra attribute It selects the correct name keeping active all the letters I've wrote...so Marco, MArco, MAX
Ciao
Marco
Hi Marco,
So without the "datalist", when you have written "max" its displaying Marco, Andrea and Xante as selections ?
And you just write "datalist" in the extra attributes ?
Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
Hi Max,
yes, only <datalist>. Without it the selection is only Xante, the row wich have for first letter the last key I've pressed.
Ciao
Marco
After a lot of time.. I think I'm near the goal using this javascript I've found on web to link the selection of the dropdown option to an input text. This is why I need to use keyboard to select a value and not the mouse.
Tha value of "clienti" is ok, but on screen the dropdown text doesn't change.
function start () {
var searchBox = document.getElementById('cercaCliente');
var clienti = document.getElementById('selectCliente');
searchBox.addEventListener('keyup', function (e) {
var text = e.target.value;
var options = clienti.options;
for (var i = 0; i < options.length; i++) {
var option = options[i];
var optionText = option.text;
var lowerOptionText = optionText.toLowerCase();
var lowerText = text.toLowerCase();
var regex = new RegExp('^' + text, 'i');
var match = optionText.match(regex);
var contains = lowerOptionText.indexOf(lowerText) != -1;
if (match || contains) {
option.selected = true;
return;
}
clienti.selectedIndex = 0;
}
});
}
window.addEventListener("load", start, false);
I try also clienti.value = '130' before the function but it still doesn't change.
After that, If I will come to the end I want to change the aspect (CSS) of the dropdown to show only the text and set it unselectable.
It's hard enought?
Grazie, Marco
Hi Marco,
I'm not sure I could understood the issue correctly, I just run a test, I opened the auto complete demo form, typed "e" in the dropdown, then got a list of articles loaded, I used the keyboard to select one of the articles then clicked the "Send" button, the debugger shows the correct id for the article selected, so there is no problem with the keyboard.
I tested this on both Chrome and FF 54, all is good, I didn't make any changes.
Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
Hi Marco,
You can create your own datalist field using HTML view or a custom field in the fields view, you may also try to add the following to the "Extra attributes" box of a normal dropdown (not auto complete enabled):
class:search
it will give the same datalist search effect.
I tested this on Chronoforms, but should work in Connectivity too, let me know if it does not.
Best regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
The "datalist search effect" on normal dropdown is perfect.
The issue is that you have to click with mouse on the result's element, also if it is only one, otherwise you see the text you have wrote but the element selected stay the default one.
I would need the first element of filtered list could be selected after that user presses TAB key to move on next input field.
Impossible?
Grazie, Marco
