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

Ask the community
,
1

Eg: If I what to add a country name to an input box and I type the first letter “U”, a database with all the countries is filtered to display below the input box all the countries that start with “U”

2

@chidiejike For that you will need a repeater with all countries.
Once you type in a letter, you refill the repeater with new data, that is, all countries starting with ‘U’

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))
}
4

@jacobg Thanks for your response but I thought there was a simpler way, because I actually thought of showing a filtered table or repeater populated with all the countries and filtering them onInput then adding the value of the table row or repeater to the input when it is clicked and hiding the table or repeater afterwards.

5

See the Country Autocomplete example.

6

Ok thanks