Want to know how to create a custom dropdown list that shares database content a.k.a. search suggestions? Find out how to use Velo code to insert Wix data into a repeater element. Also, learn how to use onKeypress Event Handler to record the keystrokes that the visitor puts into the input text box. So stay tuned for in-depth knowledge about this trick and the code behind it.

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

00:00 CN Intro

00:17 Set up a website for design architecture

02:52 Input Text Box OnKeypress Function/Method

04:00 Event Key Switch Statement

06:35 Arrow Up/Down Navigation Function

11:13 Data Query to retrieve data based on typed characters

13:53 Dropdown Repeater OnItemReady Function (Setting the Color of the onKeypress Selection)

15:30 Refresh Repeater (forEachItem) Function

16:18 View Database/Collection of Data Pull

17:00 Preview & Perform Dropdown Repeater Search Suggestions

19:00 Outro

Code Snippet to follow along with the video:

Page Code

This loads the page code. This code will be an event handler that will share a list of search suggestions for your custom dropdown repeater.

import wixData from 'wix-data';
 
const COLOR_HIGHLIGHT = "rgba(230,230,230)"; //Grey
const COLOR_REGULAR = "rgba(250,250,250)"; //white
 
let sizeOfArray;
let current_index = -1;
 
$w.onReady(function () {
 
    $w('#input1').onKeyPress((event) => {
        setTimeout(() => {
            if ($w('#input1').value.length === 0) {
                current_index = -1;
                $w("#dropdownRepeater").collapse()
                    .then(() => {
                        $w("#repeaterBox").hide();
                    });
            } else {
 
                switch (event.key) {
                case "Enter":
                    $w('#input1').value = $w('#dropdownRepeater').data[current_index].countryName;
                    $w("#dropdownRepeater").collapse()
                        .then(() => {
                            $w("#repeaterBox").hide();
                            //console.log("Done with collapse");
                        });
                    break;
                case "ArrowLeft":
                case "ArrowRight":
                    break;
                case "ArrowUp":
                    arrowUp();
                    break;
                case "ArrowDown":
                    arrowDown();
                    break;
                case "Escape":
                    $w('#input1').value = '';
                    current_index = -1;
                    $w("#dropdownRepeater").collapse()
                        .then(() => {
                            $w("#repeaterBox").hide();
                            //console.log("Done with collapse");
                        });
                    break;
                default:
                    current_index = -1;
                    wixData.query("countries")
                        .contains("countryName", $w('#input1').value)
                        .ascending("countryName")
                        .limit(5)
                        .find()
                        .then((res) => {
                            //console.log(res);
                            $w('#dropdownRepeater').data = [];
                            if (res.items.length) {
                                $w('#dropdownRepeater').data = res.items;
                                sizeOfArray = res.items.length;
                                $w('#dropdownRepeater').expand();
                                $w("#repeaterBox").show();
                            } else {
                                $w("#repeaterBox").hide();
                                $w("#dropdownRepeater").collapse();
 
                            }
                            if ($w('#input1').value.length === 0) {
                                current_index = -1;
                                $w("#dropdownRepeater").collapse()
                                    .then(() => {
                                        $w("#repeaterBox").hide();
                                    });
                            }
                        }).catch((err) => {
                            console.log(err, err.stack);
                            $w("#dropdownRepeater").collapse()
                            $w("#repeaterBox").hide();
                        });
                    break;
                }
            }
        }, 50)
    });
});
 
function arrowUp() {
    if (current_index > 0) {
        current_index -= 1;
        refresh_repeater();
    } else if (current_index === 0) {
        current_index = sizeOfArray - 1;
        refresh_repeater();
    }
}
 
function arrowDown() {
    if (current_index < sizeOfArray - 1) {
        current_index += 1;
        refresh_repeater();
    } else if (current_index === sizeOfArray - 1) {
        current_index = 0;
        refresh_repeater();
    }
}
 
export function dropdownRepeater_itemReady($item, itemData, index) {
    $item('#title').text = itemData.countryName;
 
    if (index === current_index) {
        $item("#nameBox").style.backgroundColor = COLOR_HIGHLIGHT;
    } else {
        $item("#nameBox").style.backgroundColor = COLOR_REGULAR;
    }
 
    $item('#container1').onClick(() => {
        $w('#input1').value = itemData.countryName;
        $w('#dropdownRepeater').collapse();
        $w("#repeaterBox").hide();
    });
}
 
function refresh_repeater() {
    $w("#dropdownRepeater").forEachItem(($item, itemData, index) => {
        $item('#title').text = itemData.countryName;
 
        if (index === current_index) {
            $item("#nameBox").style.backgroundColor = COLOR_HIGHLIGHT;
        } else {
            $item("#nameBox").style.backgroundColor = COLOR_REGULAR;
        }
 
        $item('#container1').onClick(() => {
            $w('#input1').value = itemData.countryName;
            $w('#dropdownRepeater').collapse();
            $w("#repeaterBox").hide();
        });
    });
}

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2022: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!