Auto-complete client name suggestion Text input in CMS Form

Ask the community
, , ,
1

Question:
Hi I have been created an CMS form which is connected with my data collection as well there is problem with my Input when type any name manually dataset save and update the field data but when I get suggestions and then submit the form field was empty or incomplete

Product:
Text Input + Repeater

What are you trying to achieve:
I am trying to achieve the onInput method when I input first charecter of my client name it will suggest previous name from the data set and then it will display on repeater for faster entries in my form


$w.onReady(function () {
    $w('#input1').onInput(() => {
        const searchQuery = $w('#input1').value;
        filterResults(searchQuery);
    });
});

function filterResults(searchQuery) {
    wixData.query('YourCollectionName') // Replace 'YourCollectionName' with the actual name of your collection
        .startsWith('fieldName', searchQuery) // Replace 'fieldName' with the field name you want to search for
        .find()
        .then((results) => {
            $w('#suggestions').data = results.items.map(item => item.fieldName); // Replace 'fieldName' with the field name you want to show in the suggestions
        })
        .catch((err) => {
            console.error('Error filtering results:', err);
        });

    $w('#suggestions').expand();
}

$w('#suggestions').onItemReady(($item, itemData) => {
    $item('#suggestion').text = itemData;
    $item('#suggestion').onClick(() => {
        $w('#input1').value = itemData; // Set the selected value in the input field
        $w('#suggestions').collapse(); // Collapse the suggestions after selection
    });
});
2

Is this the name of the collection?

Is fieldName the name of the field?

Same here.

This executes every time someone enters a character in the input field so if I enter my name Anthony it will execute 7 times. This is rather expensive. You might want to rate limit this request, only run it after a certain number of characters are entered, and maybe ensure it only runs once for the user until they clear the input. Lots of ways to approach this; just a few suggestions.