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();
});
});
}
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
📺 MY PLAYLISTS :
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 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!
