Repeater that works like a drop down input

Ask the community
,
1

I have a text input with a hidden repeater under it that will appear when the user starts typing in the input. The repeater shows a list of suggested addresses the user can click on to use in the input. All this works fine, but the repeater pushes everything below it down.

Is there a way to make a repeater behave more like a drop down menu? Instead of pushing all the elements under it down, I want it to flow over the elements like a drop down menu. I’d settle for being able to open a drop down menu with code instead of a user click. Or any other way to accomplish a menu that has a dynamic number of items in it that doesn’t push the elements below it down.

2

Yes, you can.
Put the repeater inside a box and make sure the box significantly overlaps (as top layer) of the element below. Make the box collapsed as default, expand it onInput() and collapse it onBlur()

3

That worked perfectly. Thank you so much. Unfortunately, the purpose of the drop-down is for users to click on it to populate the input field. However, the onBlur from the input seems to fire first, so the dropdown gets collapsed before the mouse click fires. Also, the drop-down doesn’t block the elements underneath. I can easily disable them when the drop down expands but it seems like there should be a cleaner way of making the menu block the elements beneath it. At any rate, your solution gave me something to work with I didn’t have before so thanks again for your help.

4

@bnestars

  1. You can do something like this:
let isDropdwonClick = false;
$w("#dorpdownBox).onClick(() => {
isDropdwonClick = true;
})
$w("#input").onBlur(() => {
if(!isDropdwonClick){$w("#dorpdownBox).collapse();}
isDropdwonClick = false;
})
  1. You’ll have to disable them. Alternatively, put a transparent layer over them.
5

P.S. and if you wish to be absolutely sure the timing is correct, you can add a timeout:

let isDropdwonClick = false;
$w("#dorpdownBox).onClick(() => {
    isDropdwonClick = true;
})
$w("#input").onBlur(() => {
    setTimout(() => {
        if(!isDropdwonClick){$w("#dorpdownBox).collapse();}
        isDropdwonClick = false;
    }, 20);
})
6

You can get started with the Repeater Dropdown example.

7

Thanks for the suggestion. Something always goes wonky when I try to open example sites in the editor. I have tried turning off all browser extensions, turning off anti-virus and firewall, deleting my browser cache, opening examples with another account, opening examples in a different browser (Chrome, Firefox, and Edge) and opening examples in an incognito window.

Edit: Forgot to mention that I tried all of the above on my PC as well as my girlfriend’s laptop.

Generally, it loads most of the design elements, though sometimes not even the design elements, but I can never see or open any code. For the first time since I started learning Wix, I actually got your repeater dropdown example to open well enough to copy and paste the code into a text editor, although when I try to preview the page from the editor, I get:

“LoadUserCodeError: Failed to import user code script: Failed to execute ‘importScripts’ on ‘WorkerGlobalScope’: The script at ‘https://d9fc89a3-fdfe-47e3-a67a-ea8c08b59969.dev.wix-code.com/pages/c1dmp.js?cacheKiller=1624443975425&gridAppId=7be1c790-5117-4407-b686-3a57e1e82830&instance=wixcode-dev.3a44c7c62d163a2e236d231de6f78387c2826139.eyJpbnN0YW5jZUlkIjoiZDlmYzg5YTMtZmRmZS00N2UzLWE2N2EtZWE4YzA4YjU5OTY5IiwiY29ycmVsYXRpb25JZCI6IjI5MTBhZDQ3LWU0NmMtNGYwNS1iYzUwLWFkNGZiMzIzZDVhMSIsInNlc3Npb25VSWQiOiI3MzIxNGQxNi0yOTc3LTQ1NTAtOTA1NS0yZDRiMjIyNWEyZGEiLCJpc1RlbXBsYXRlIjpmYWxzZSwic2lnbkRhdGUiOjE2MjQ0NDM5Nzk1NDgsInNpdGVNZW1iZXJJZCI6IjczMjE0ZDE2LTI5NzctNDU1MC05MDU1LTJkNGIyMjI1YTJkYSIsInVpZCI6IjczMjE0ZDE2LTI5NzctNDU1MC05MDU1LTJkNGIyMjI1YTJkYSIsImFwcERlZklkIjoiQ2xvdWRTaXRlRXh0ZW5zaW9uIiwiaXNBZG1pbiI6dHJ1ZSwibWV0YVNpdGVJZCI6ImJjODkwMGYzLWY3MmQtNDJmMi1iM2YxLTEwZTBiZjZhNWNjNSIsImNhY2hlIjpudWxsLCJleHBpcmF0aW9uRGF0ZSI6IjIwMjEtMDYtMjNUMTQ6MjY6MTkuNTQ4WiIsInNpdGVPd25lcklkIjoiNzMyMTRkMTYtMjk3Ny00NTUwLTkwNTUtMmQ0YjIyMjVhMmRhIiwiaW5zdGFuY2VUeXBlIjoiZGV2In0=&viewMode=preview’ failed to load.”

8

@jonatandor35 Thanks for the reply. I was thinking along these same lines but your solution is more elegant than mine was.

Edit: After implementing this in my code, it didn’t work. I tried several things but it wound up just being the timeout is too short. I set it to 100ms instead of 20 and it works perfectly.

9

@bnestars Did you try to load and run the example itself? I suspect that haven’t correctly copied everything which is why you are getting the error.

Start again with the working example, and then work on migrating the code to your site.