Hi
I realized my input text #autocomplete menu, but it miss something.
I would like to #highlight an item of a #repeater, for example changing the color of the text.
I found some way, like here, the Dan’s solution :
https://www.wix.com/corvid/forum/community-discussion/highlight-repeater-row-onclick
but you have to click an item!
I would like to choose an item via keyboard, that’s using #arrowUp and #arrowDown keys.
But the handlers of the containers don’t provide onFocus method, only onClick.
There’s a way ?
thanks in advance
Mauro
This is the test site, you can use Enter to autocomplete or use click mouse :
https://costieraslow.wixsite.com/testquery/autocomplete
then follow what I set up and the code:
database
in the main page
- a ‘input1’ text input box
- a ‘dataset1’ linked to the collection
- a ‘repeater1’ linked to the dataset and hide on load
code
// HOME PAGE
import wixData from 'wix-data';
$w.onReady(function () {
});
export function input1_keyPress_1(event) {
$w('#repeater1').show();
$w('#repeater1').expand();
// let $item = $w.at(event.context)
// console.log($item("#box1"))
setTimeout(() => {
if ($w('#input1').value === "") {$w('#repeater1').collapse()}
switch (event.key) {
case "Enter":
$w('#input1').value = $w('#repeater1').data[0].nominativo
$w('#repeater1').collapse()
break;
case "arrowUp":
//........
break;
case "arrowDown":
//........
break;
case "Escape":
$w('#repeater1').collapse()
break;
default:
wixData.query("Producers")
.contains("nominativo", $w('#input1').value )
.ascending("nominativo")
.find()
.then( (res) => { $w('#repeater1').data = res.items; $w('#repeater1').show(); })
break;
}
}, 500)
} //_____________________________________________
// MOUSE
export function container1_click(event) {
let $item = $w.at(event.context);
let clickedItemData = $item("#dataset1").getCurrentItem();
$w('#input1').value=clickedItemData.nominativo;
$w('#repeater1').collapse() ;
}
Haven’t tried or tested this myself, so it might need some tweaking but this is what comes to mind:
(might need to await default in arrowDown case)
import wixData from 'wix-data';
let totalRes;
let currIndex = 0;
export function repeater1_itemReady($item, itemData, index) {
//MOUSE
$item('#container1').onClick(()=>{
$w('#input1').value = itemData.nominativo;
$w('#repeater1').collapse()
} );
//KEYBOARD
let con = $item('#container1');
$w('#input1').onKeyPress(()=>{
$w('#repeater1').show();
$w('#repeater1').expand();
setTimeout(() => {
if ($w('#input1').value === "") {$w('#repeater1').collapse();}
switch (event.key) {
case "Enter":
$w('#input1').value = $w('#repeater1').data[0].nominativo;
$w('#repeater1').collapse();
break;
case "arrowUp":
currIndex -= 1;
//not sure if repeater index starts at 0 or 1, so you should console.log() it to be sure
if (index > 0) {
index !== currIndex ? con.style.backgroundColor = '#414141' : con.style.backgroundColor = 'white';
}
break;
case "arrowDown":
currIndex += 1;
if (index < totalRes) {
index !== currIndex ? con.style.backgroundColor = '#414141' : con.style.backgroundColor = 'white';
}
break;
case "Escape":
$w('#repeater1').collapse();
break;
default:
wixData.query("Producers")
.contains("nominativo", $w('#input1').value)
.ascending("nominativo")
.find()
.then( (res) => {
$w('#repeater1').data = res.items;
totalRes = res.items.length;
$w('#repeater1').show();
} );
break;
}
}, 500)
} );
}
Wow! Hi @skmedia OK
1. Perhaps I need ‘event’, right ?
$w('#input1').onKeyPress(()=>{
become:
$w('#input1').onKeyPress((event)=>{
2.A question, is normal the question mark in the following code line?
index !== currIndex ? con.style.backgroundColor = '#414141'
-
I know that you can’t modify the background a container, isn’t it ? fot this reason I imagine to change the color of the text, what do you think about ? Or you have to add a box1 inside the transparent container and change the color of box1
-
I tried your routine, don’t know why, but it’s more slower when you type and search some text rather then mine.
@mauro-vento-avyno Yes, sorry. You do need that event in there, I forgot to add it.
I used a ternary operator which uses the question mark, just because it made it easier to fit the code in the frame for visibility. You can also use a conditional statement (if else).
A container box is just a box in the end, so yes you can change its style properties. If you wanted to change the text color, you’d have to alter the text’s html property.
I haven’t debugged it at all, just copied and altered your approach a little. Try decreasing the timer first of all to around 200 ms and see if it still feels slow.
@skmedia I’ll try you routine and I hope so to improve my coding.
Thanks so much (Y)
Mauro
@mauro-vento-avyno Good luck! And actually, the way to change container background is .background.src, not .style.backgroundColor. My mistake
@skmedia David thx so much, I’ll feedback to you asap !
Hi @skmedia , noway, I was not able to finalize your advices. I’m not able to select an element in the container-n.
With your method with repeter.ItemReady I get always the totality of the container with their index (0…n), but each time I press a single key, the repeater diminish the number of containers I see, on the base of search, so I should get only the index of the containers I actually see.
Not only, but, one time that I got the subset of the index I see, in which way I can set the element in the container j ? For example the color of the text or the color of a box.
eg. $item(“#box1”, index).color = “red”;
I read for a long time the API references https://www.wix.com/corvid/reference/$w.html#at
but I didn’t get it, sorry.
What do you suggest ?
Hi @shiran-kohai could you give us yet an hand ?
Thanks in advance
Mauro
Here we need an help, please 
I’ll see if I can get it working, because it would be a cool feature.
Hey guys - nice work on this! I hope you don’t mind, but I started out with your ideas, had a few beers, and voila! Here’s an example of a Repeater Dropdown with Keyboard Navigation . I had been meaning to do something like this for a while, and this forum thread provided the necessary inspiration. Thanks! 
PS: @yisrael-wix could you add a simple example about in the repeater item reference API please ? thxXX
@yisrael-wix No fair, I didn’t know we were allowed to take performance enhancing beers…
Nice work! I also added this snippet since up arrow also returns to the beginning of the input and this helps prevent the autocomplete from reloading if a user needs to change spelling or something
case "ArrowLeft":
event.preventDefault();
break;
case "ArrowRight":
event.preventDefault();
break;
Hey - there are no rules. All’s fair in love and software. And beer - it’s WD-40 for the brain.
You have a good point with the right and left arrows. It’s even easier:
case "ArrowLeft":
case "ArrowRight":
break;
All that’s really needed is to prevent the left/right arrows from causing an unnceccessary re-rendering of the dropdown list which only causes an annoying flickering.
I’m not sure that preventDefault() is necessary here since it only prevents the default action of the component. In this case there isn’t any real clear-cut “component” - we sort of have a mish-mash. The preventDefault() method is more applicable where defining an event handler for a checkbox (just as an example), and preventing the default action (toggling the checkbox) when handling an event of the component.
Thanks again guys. Someday we’ll get together, and WD-40 our brains.
Hi @yisrael-wix and @skmedia ,
an unexpected issue, a Chrome’s menu overlap our repeater and disable the arrow keys !
Here really I don’t know which Saint to invoke, have you some advices ?
Thx in advance
Mauro
