Hi everyone, thank you for reading my question 
I am struggling with my code, I really don’t know where the problem on my autofill input comes from.
So here is the thing : my input is showing “list of the cities” until I press an arrow down, which is not the behavior that it is supposed to be.
Here are some printscreen of the problem, and I will paste my code below
When typing letters
When pressing arrow down
And here is my code (don’t mind the last function, it’s related to the checkbox) :
For information, I borrowed and adapted this code from another user ( https://www.wix.com/corvid/forum/tips-tutorials-examples/example-repeater-dropdown-with-keyboard-navigation )
import wixUsers from 'wix-users';
import wixData from 'wix-data';
$w.onReady(function () {
//TODO: write your page related code here...
});
const HL_COLOR = "rgba(190,190,250)";
const REG_COLOR = "rgba(222,222,222)";
let listSize;
let currIndex = -1;
$w.onReady(function () {
$w('#city').onKeyPress((event) => {
setTimeout(() => {
if ($w('#city').value.length === 0) {
currIndex = -1;
$w("#repeater1").collapse()
.then(() => {
console.log("Done with collapse");
});
} else {
switch (event.key) {
case "Enter":
$w('#city').value = $w('#repeater1').data[currIndex].title;
$w("#repeater1").collapse()
.then(() => {
console.log("Done with collapse");
});
break;
case "ArrowLeft":
case "ArrowRight":
break;
case "ArrowUp":
if (currIndex > 0) {
currIndex -= 1;
refresh_repeater();
}
break;
case "ArrowDown":
if (currIndex < listSize - 1) {
currIndex += 1;
refresh_repeater();
}
break;
case "Escape":
$w('#city').value = '';
currIndex = -1;
$w("#repeater1").collapse()
.then(() => {
console.log("Done with collapse");
});
break;
default:
currIndex = -1;
wixData.query("cities")
.startsWith("title", $w('#city').value)
.ascending("title")
.limit(5)
.find()
.then((res) => {
$w('#repeater1').data = [];
$w('#repeater1').data = res.items;
listSize = res.items.length;
$w('#repeater1').expand();
});
break;
}
}
}, 50)
});
});
export function rptDropdown_itemReady($item, itemData, index) {
$item('#text18').text = itemData.title;
if (index === currIndex) {
$item("#box3").style.backgroundColor = HL_COLOR;
} else {
$item("#box3").style.backgroundColor = REG_COLOR;
}
$item('#container4').onClick(() => {
$w('#city').value = itemData.title;
$w('#repeater1').collapse();
});
}
function refresh_repeater() {
$w("#repeater1").forEachItem(($item, itemData, index) => {
$item('#text18').text = itemData.title;
if (index === currIndex) {
$item("#box3").style.backgroundColor = HL_COLOR;
} else {
$item("#box3").style.backgroundColor = REG_COLOR;
}
$item('#container4').onClick(() => {
$w('#city').value = itemData.title;
$w('#repeater1').collapse();
});
});
}
export function checkbox1_change(event, $w) {
if ($w("#checkbox1").checked){
$w("#poids").show();
}
else
$w("#poids").hide();
}
Thank you so much for your help !
), but after reconstructing it as shown in my code previously I have this bug happening and I can’t figure out why…
)
