Hello Velo Community,
I am implementing a robust **debounce autocomplete search functionality** on my Home page. After successfully resolving multiple coding errors (Timer/Debounce logic, `toLowerCase` type errors, and `async/await` handling), the core code logic is now correct. However, I am facing a persistent structural/rendering issue with the elements.
The Goal:
When a user types in #queryInput, the system should:
- Query a database collection (
Items). - Show the suggestions inside a Repeater.
The Challenge: Structural Conflict (Repeater vs. Box)
In Velo, the standard best practice is to place the Repeater (#suggestRepeater) inside a Box (#suggestBox) so that the Box can be collapse()ed and expand()ed, moving the page content below it.
- Problem: The Wix Editor consistently prevents me from correctly nesting the Repeater inside the Box. Both elements remain **siblings** in the Layers panel, despite physical dragging and attempts to use the ‘Attach To’ function (which is unavailable).
Current Code/Workaround:
To bypass the structural issue, I modified my code to directly control the Repeater, and then reversed it, realizing the Box is necessary for proper page flow:
- Elements:
#queryInput(Input),#suggestBox(Box, for background/page flow),#suggestRepeater(Repeater, for data display). They are all siblings. - Logic: My `hideSuggest()` and `showSuggest()` functions now operate on **both** the Box and the Repeater to ensure they open and close together:
// Current attempt to hide/show both siblings simultaneously
function hideSuggest() {
$w('#suggestBox').collapse();
$w('#suggestRepeater').collapse();
}
function showSuggest() {
$w('#suggestBox').expand();
$w('#suggestRepeater').expand();
}
// In $w('#queryInput').onInput:
// ... debounce logic calls doSuggest(q)
// In doSuggest(q):
// ... $w('#suggestRepeater').data = out.slice(0, 8);
// ... showSuggest();
The Resulting Issue:
Despite having correct code and attempting to control both sibling elements:
The system queries the database successfully.
The console logs confirm that showSuggest() is called.
However, the suggestions either do not render at all, or they appear inconsistently and/or cause the search input element to shift unexpectedly.
My question to the community:
Has anyone encountered this specific failure to nest the Repeater inside the Box? (Where dragging/attaching fails).
Is there a known Velo/Editor trick (e.g., using zIndex or a specific Container type) to force the parent-child relationship when dragging fails?
Given the sibling structure, is there a better, more stable method than controlling both the Box and the Repeater independently (as done in the code above)?
Thank you for your help!