Hello!
I was using @yisrael-wix 's example to make an autosuggest dropdown for my search bar.
I found it on his site (I think it is his). https://www.velobrewmaster.com/Examples/Repeater-Dropdown
There was a bit in the code that got an error message when I used his example on my website. The autosuggest dropdown is working fine with the error code. The only thing missing is when someone hovers over a suggestion or use the arrow keys to pic a suggestion, the color stays the same. I want make it high lighted. That is why I need this code correct. The code is very long, so I will only show the bit where the error message is.
export function word_itemReady($item, itemData, index) {
$item('#text89').text = itemData.title;
if (index === currIndex) {
$item("#wordBox").style.backgroundColor = HL_COLOR;
} else {
$item("#wordBox").style.bachgroundColor = REG_COLOR;
}
$item('#wordBox').onClick(() => {
$w('#input1').value = itemData.title;
$w('#word').collapse();
});
}
I got the error message on the “.style” on both line 4 & line 6. I just can’t find the issue. I would be very grateful if someone could help.
~Thanks~
Arthur😀
Yep, it’s mine…
I tried out the example and I don’t see any error messages. What messages are you getting? What changes did you make to the code?
Hello Yisrael!
The error messages I am getting are both ‘style’ does not exist on #wordBox. I have not made any changes to the code so there should be no error messages. I think the error message doesn’t show in the example website but only when you use it on your own website. I found a user that had the same experiance in the forum.
https://www.wix.com/corvid/forum/main/comment/5d12f13ec9d37a0017d1d29e . Sould I past the holl page code?
~Thank you for replying to my post!~
Arthur
It’s not an error in the code, rather it’s an error how you have defined the onscreen elements. In order to apply style, you need a container box, inside the Repeater’s container, which is inside the Repeater itself.
To see how the elements are arranged, right click on the Repeater and then Select the “Overlapping Items” option from the menu:
Thanks! I will try it out!
Hello!
I found out that the container box id is #wordBox. Also, I forgot that I did change the code a bit.
before
$item('#container1').onClick(() => {
$w('#input1').value = itemData.title;
$w('#word').collapse();
});
after
$item('#wordBox').onClick(() => {
$w('#input1').value = itemData.title;
$w('#word').collapse();
});
I think this was 1 of the problems. I did this because I got an error on ‘.onClick’. I have changed it back now. Now I have this error message and the two I have said. It’s a bit frustrating because the code isn’t getting any errors underneath (even though it contains the same code). Just to let you know: #word is the name on the repeater & #wordBox is the name of the container. Wait, I wonder what #container1 is then.
I know that I am taking your time and I really apreaciate you helping me!
~Thanks~
Arthur😀
#containter1 is the default container that contains all of the elements that are contained in a Repeater Item. You can sort of think of it as #container1 is the “thing” (along with everything that it contains) that will be repeated. If you want to apply a style, you need to add a Container Box to #container1, and make the Container Box the same size as #container1. You apply the stye to the Container Box - not to #container1 which cannot be styled.
You might want to reach out to Wix Customer Care . who can most probably do a much better job explaining the details of a Repeater than I can.
Hello! I just added a container box to my repeater. The error messages are now gone. The only thing is, the autosuggest dropdown won’t highlight when using the arrow keys. This is very frustrating because I have looked at the example code and my code side by side many times. Could you help me?
Link to website: https://arthurvalatin.wixsite.com/free-images
Here is the code for my autosuggest dropdown
import wixData from 'wix-data';
const HL_COLOR = "rgba(250,5,5";
const REG_COLOR = "rgba(250,250,250)";
let listSize;
let currIndex = -1;
$w.onReady(function () {
$w('#input1').onKeyPress((event) => {
setTimeout(() => {
if ($w('#input1').value.length === 0) {
currIndex = -1;
$w("#word").collapse()
.then(() => {
console.log("Done with collapse");
});
} else {
switch (event.key) {
case "Enter":
$w('#input1').value = $w('#word').data[currIndex].title;
$w("#word").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('#input1').value = '';
currIndex = -1;
$w("#word").collapse()
.then(() => {
console.log("Done with collapse");
});
break;
default:
currIndex = -1;
wixData.query("wordList")
.startsWith("title", $w('#input1').value)
.ascending("title")
.limit(4)
.find()
.then((res) => {
$w('#word').data = [];
$w('#word').data = res.items;
listSize = res.items.length;
$w('#word').expand();
});
break;
}
}
}, 50)
});
});
export function word_itemReady($item, itemData, index) {
$item('#text89').text = itemData.title;
if (index === currIndex) {
$item("#wordBox").style.backgroundColor = HL_COLOR;
} else {
$item("#wordBox").style.backgroundColor = REG_COLOR;
}
$item('#Container1').onClick(() => {
$w('#input1').value = itemData.title;
$w('#word').collapse();
});
}
function refresh_repeater() {
$w("#word").forEachItem(($item, itemData, index) => {
$item('#text79').text = itemData.title;
if (index === currIndex) {
$item("#wordBox").style.backgroundColor = HL_COLOR;
} else {
$item("#wordBox").style.backgroundColor = REG_COLOR;
}
$item('#Container1').onClick(() => {
$w('#input1').value = itemData.title;
$w('#word').collapse();
});
});
}
I now that you are spending a lot of your time for me and I am very grateful. I hope this problem solves soon.
Arthur😀
Hey,
I know it has nothing to do with this post, but I dont know how to cantact you else.
I have a question to a post you made: https://www.wix.com/corvid/forum/tips-tutorials-examples/example-multiple-groups-filter
I’m looking for a code like this since over a week, but I don’t finde one.
In your tutorial is no code to copy.
Could you please send me the code from this tutorial ? It would help me really much.
I know that you were not asking me the question, but please don’t come bumping into my post if it has nothing to do with it. If you have any questions, post them in a new post using @nameOfUser to get help from the person you want.
~Have a nice day!~
Arthur😀
Okay, sorry I didn’t know about this function 
Sorry, have a nice day, too 
Sorry for posting on an old thread but, what happened to https://www.grampsworkbench.com (the domain is for sale)? Is the autosuggest dropdown example available anywhere else? This is exactly what I’m looking for but can’t find any other sources. :-/
The domain changed. Bookmark it here: https://www.velobrewmaster.com/
@marlowe-shaeffer thanks very much! I have this functioning with an external API (rather than internal database).
I would like a hover interaction on dropdown items for the container box (e.g change its background colour akin to how it changes with keypresses) but whether I do this programmatically or within the editor, I can’t get a hover interaction to work?
@marlowe-shaeffer Thanks so much for pointing that out. The examples will be a big help!
