How do I create an input predictable text when an input value is added to an input box?

Ask the community
,
3

@ chidi.ejike
In the following example I use an input element (#resourceInput) and below it I use a repeater (#staffRepeater) to show staff members in a site.
Note the .onKeyPress() function that is required in order to trigger the repeater data update.
Here is a code example:


import WixBookings from 'backend/WixBookings'

let allStaff

$w.onReady(async function () {
    $w("#staffRepeater").data = []
    allStaff = await WixBookings.queryResourcesCatalog() //gets the list of staff members from backend. In your case, get the list of countries as an array of objects.
    $w("#staffRepeater").data = allStaff
    $w("#staffRepeater").onItemReady(($item, data) => populateRepeater($item, data))
    $w("#resourceInput").onClick(() => showRepeater())
    $w("#resourceInput").onKeyPress(() => updateRepeater())
});

function populateRepeater($item, data) {
    $item("#resourceName").text = data.name
    $item("#resourceId").text = data._id
}

function showRepeater() {
    $w("#staffRepeater").show()
    updateRepeater()
}

async function updateRepeater() {
    let stringValue = $w("#resourceInput").value    
    let dataForRepeater = []
    if (stringValue == "") {
        $w("#staffRepeater").data = allStaff
    } else {
        for (let i = 0 ; i < allStaff.length ; i++) {
            if (String(allStaff[i].name).toLowerCase().includes(String(stringValue).toLowerCase())) {
                dataForRepeater.push(allStaff[i])
            }
        }
        $w("#staffRepeater").data = []
        $w("#staffRepeater").data = dataForRepeater
    }
    $w("#staffRepeater").forEachItem(($item, data) => updateButtonStatus($item, data))
}