Autocomplete Repeater Dropdown issue when expanding

Ask the community
,
1

Hi,

I am working on an autocomplete repeater dropdown, pretty much the same idea that @yisrael-wix shown in his example here .

My test site, so you can see it live : “removed by author”

My code for it :

import wixData from 'wix-data';

//start a timer for the input
let debounceTimer;

export function inputVille_input(event) {

 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
 let valLength = $w('#inputVille').value.length;
        console.log(valLength);

//Adding a limit of two characters minimum before starting the filter

 if (valLength > 2) {

            $w("#dataset4").setFilter(wixData.filter()
                    .startsWith("title", $w("#inputVille").value)
                )
                .then(() => {
                
//Handling results of the filter

                    $w("#startText").collapse();
                    $w("#repeater2").expand()
                    $w("#animationGif").collapse()
                    $w("#listClose").show()
                    
 //Counting results after filter

 let count = $w("#dataset4").getTotalCount()

                    console.log("Dataset is now filtered");
                    console.log(count);
                    
 //If no result found

 if (count === 0) {
                        console.log("counted zero");
                        $w("#startText").expand();
                        $w("#repeater2").collapse()
                        $w("#startText").text = "aucun résultat"
                        $w("#button283").expand();

                    }
                })
        } 
        
 //If there are less or 2 characters after the filter (in cases users use backspace)

        else if (valLength <= 2) {
            $w("#startText").expand();
            $w("#startText").text = "commencez à taper pour rechercher"
            $w("#animatedGif").expand()
            $w("#repeater2").collapse()
 
 
  //hiding the repeater if there are less than 2 characters and showing the GIF

        } else {
            $w("#repeater2").collapse()
            $w("#animatedGif").expand()

        }

    }, 400);

}

The thing is that I need to place it inside my page, not always on top, so I have some text elements or some image under it (the two stripes represents elements I may need). My issue is that if there are too many results in the repeater, it will expand and “push” down elements under it, instead of staying on top of them.

I can’t put it in a stripe, because it will then make the stripe higher when expanding, instead of passing over its bottom edge and staying on top of elements under it.

Is there any way I can have this box and repeater growing depending on how much results there are, but staying always on top without affecting elements under it ?

Hope someone can help me on this.

2

Giving it a small bump… hoping someone can at least tell me it is impossible to have elements under a repeater that won’t be affected by its growth