# Code for an autofill input

**URL:** <https://forum.wixstudio.com/t/code-for-an-autofill-input/31366>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [June 26, 2020, 8:13pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366 "2020-06-26T20:13:40Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 26, 2020, 8:13pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/1 "2020-06-26T20:13:40Z")

</div>

Hi everyone, thank you for reading my question 🙂

I am struggling with my code, I really don’t know where the problem on my autofill input comes from.  
So here is the thing : my input is showing “list of the cities” until I press an arrow down, which is not the behavior that it is supposed to be.

Here are some printscreen of the problem, and I will paste my code below

When typing letters

 ![](https://us1.discourse-cdn.com/wix/original/3X/0/3/038ab3b6342780c44ca7628498a28ab0593a80c5.png)

When pressing arrow down

 ![](https://us1.discourse-cdn.com/wix/original/3X/d/f/df8ab2ad3fdd735b99a97ca0dc174b0205fca645.png)

And here is my code (don’t mind the last function, it’s related to the checkbox) :  
_For information, I borrowed and adapted this code from another user (_ [_https://www.wix.com/corvid/forum/tips-tutorials-examples/example-repeater-dropdown-with-keyboard-navigation_](https://www.wix.com/corvid/forum/tips-tutorials-examples/example-repeater-dropdown-with-keyboard-navigation) _)_

```javascript
import wixUsers from 'wix-users';
import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: write your page related code here...
});

const HL_COLOR = "rgba(190,190,250)";
const REG_COLOR = "rgba(222,222,222)";

let listSize;
let currIndex = -1;

$w.onReady(function () {
    $w('#city').onKeyPress((event) => {
        setTimeout(() => {
 if ($w('#city').value.length === 0) {
                currIndex = -1;
                $w("#repeater1").collapse()
                    .then(() => {
                        console.log("Done with collapse");
                    });
            } else {

 switch (event.key) {
 case "Enter":
                    $w('#city').value = $w('#repeater1').data[currIndex].title;
                    $w("#repeater1").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('#city').value = '';
                    currIndex = -1;
                    $w("#repeater1").collapse()
                        .then(() => {
                            console.log("Done with collapse");
                        });
 break;
 default:
                    currIndex = -1;
                    wixData.query("cities")
                        .startsWith("title", $w('#city').value)
                        .ascending("title")
                        .limit(5)
                        .find()
                        .then((res) => {
                            $w('#repeater1').data = [];
                            $w('#repeater1').data = res.items;
                            listSize = res.items.length;
                            $w('#repeater1').expand();
                        });
 break;
                }
            }
        }, 50)
    });
});

export function rptDropdown_itemReady($item, itemData, index) {
    $item('#text18').text = itemData.title;

 if (index === currIndex) {
        $item("#box3").style.backgroundColor = HL_COLOR;
    } else {
        $item("#box3").style.backgroundColor = REG_COLOR;
    }

    $item('#container4').onClick(() => {
        $w('#city').value = itemData.title;
        $w('#repeater1').collapse();
    });
}

function refresh_repeater() {
    $w("#repeater1").forEachItem(($item, itemData, index) => {
        $item('#text18').text = itemData.title;

 if (index === currIndex) {
            $item("#box3").style.backgroundColor = HL_COLOR;
        } else {
            $item("#box3").style.backgroundColor = REG_COLOR;
        }

        $item('#container4').onClick(() => {
            $w('#city').value = itemData.title;
            $w('#repeater1').collapse();
        });
    });
}

 
export function checkbox1_change(event, $w) {
if ($w("#checkbox1").checked){
    $w("#poids").show();
    }
 else
    $w("#poids").hide();
}

```

Thank you so much for your help !

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 1:09am UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/2 "2020-06-27T01:09:17Z")

</div>

Hello, any suggestion ? 🙂

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 27, 2020, 7:33am UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/3 "2020-06-27T07:33:47Z")

</div>

Hello Valentin,

you want to realize something like this?

[https://www.wix.com/gramps-workbench/repeater-dropdown](https://www.wix.com/gramps-workbench/repeater-dropdown)

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 7:02pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/4 "2020-06-27T19:02:51Z")

</div>

Hi Russian Dima 🙂  
Thank you so much for replying me ! Yes it’s exactly what I intend to do, except that my database is a bit different (it’s 28 000 cities) Thank you !

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 27, 2020, 7:25pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/5 "2020-06-27T19:25:18Z")

</div>

Then you have just to look for Yisraels-Template-Collection, you will find the Link on my little helping site…  
[https://russian-dima.wixsite.com/meinewebsite/blank-5](https://russian-dima.wixsite.com/meinewebsite/blank-5)  
The example-template is called “Repeater Dropdown” and you can reconstruct it directly in your editor.

Take a look and try it out…

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 7:28pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/6 "2020-06-27T19:28:45Z")

</div>

Hi ! Thank you for your answer 🙂

Well, that’s what I did already (I mentionned it on my question 😉 ), but after reconstructing it as shown in my code previously I have this bug happening and I can’t figure out why…  
😭😭😭

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 27, 2020, 7:34pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/7 "2020-06-27T19:34:31Z")

</div>

Ok, i take a look… (no promise that i can help you 😁🙄)

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 27, 2020, 7:43pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/8 "2020-06-27T19:43:46Z")

</div>

Give me some facts.

You have a DATABASE, which column is relevant? (column-ID)  
As i can see, a dataset is not needed, because Yisrael did it with a query.

The database (“Countries”) in this example consists of 1-column which is used → the first column (ID=title)

So i think you have just to change this 2-values.

(If you are not sure what to do, show a image of your database (just the 2 first rows and the relevant column are needed).

EDIT:

* * *

Ohh damn, the database is even included in Yisrael’s example.

 ![](https://us1.discourse-cdn.com/wix/original/3X/e/1/e11e6df6de5640f0b54f20d41f7932fd71c18ccb.png)

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 7:51pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/9 "2020-06-27T19:51:26Z")

</div>

I can’t thank you enough for the time you spend helping me. I will check your tip and will come back to you asap 🙂

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 27, 2020, 7:52pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/10 "2020-06-27T19:52:32Z")

</div>

Valentin, all you have to do, are just 2-things.

1. Replace Database-Name (“Countries”) with your own Database-Name.  
How is called your Database?

2. Replace the column-ID (“title”) with your own colum-ID.  
What is the ID of the relevant column in your database?

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 7:56pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/11 "2020-06-27T19:56:56Z")

</div>

My database is called cities  
wixData . query ( “cities” )

On my database, the colum relevant for the cities have “title” for ID

By the way, I believe the query is working, I just have the “list of cities” text on my repeater until I press arrow down which then shows the cities.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 27, 2020, 8:06pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/12 "2020-06-27T20:06:17Z")

</div>

Could you find the little bug?  
Sorry, i can not see your project 😁  
Take a pic of your database (header + first row/vlaue)

(showing the id)

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 8:20pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/13 "2020-06-27T20:20:05Z")

</div>

![](https://us1.discourse-cdn.com/wix/original/3X/9/c/9c3c3bf5a3cf906ca8352ec0658ba4f0d7bfbb5c.png)

---

<div class="post-metadata">

**Author:** ![valentinloppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/valentinloppe/32/21343_2.png) [@valentinloppe](https://forum.wixstudio.com/u/valentinloppe)\
**Post date:** [June 27, 2020, 8:44pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/14 "2020-06-27T20:44:43Z")

</div>

I have found the answer !

For those with the same issue, you just need to add a dataset and link the text to the title field of your database 😀😀

Be sure that all the permissions on your database are set to “Everyone” and on your dataset “read and write”, and be sure that your sandboxhave been synced.

---

<div class="post-metadata">

**Author:** ![geetgovindnagar-0004](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/geetgovindnagar-0004/32/31989_2.png) [@geetgovindnagar-0004](https://forum.wixstudio.com/u/geetgovindnagar-0004)\
**Post date:** [June 26, 2022, 1:38am UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/15 "2022-06-26T01:38:01Z")

</div>

@russian-dima yes i need this help

[https://www.wix.com/gramps-workbench/repeater-dropdown](https://www.wix.com/gramps-workbench/repeater-dropdown)

---

<div class="post-metadata">

**Author:** ![sublisimples](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/sublisimples/32/36001_2.png) [@sublisimples](https://forum.wixstudio.com/u/sublisimples)\
**Post date:** [December 29, 2022, 1:19pm UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/16 "2022-12-29T13:19:16Z")

</div>

alguem tem o codigo do link acima:

---

<div class="post-metadata">

**Author:** ![Kleh](https://avatars.discourse-cdn.com/v4/letter/k/7bcc69/32.png) [@Kleh](https://forum.wixstudio.com/u/Kleh)\
**Post date:** [March 23, 2024, 8:13am UTC](https://forum.wixstudio.com/t/code-for-an-autofill-input/31366/17 "2024-03-23T08:13:10Z")

</div>

Hi, this is great! Could you give me a hint on how to achieve this?