Set autocomplete on Dropdown formfield

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

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

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

No, but I think that's my english problem.
Take a look to this JS demo select searchable
I'm try to do something like this in a CCv6 form because my user don't use mouse. They write on keyboard some char of the value they want to select and then press ENTER for submit.

I'm not a pure web developer and can't find any other way to do it. The better solution could be a kind of <datalist> with rule that require the selection of an existing option value.

Do you think that <datalist> could be a filed type included in any next update?

thanks
Marco

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

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