# How to autofill an input text field from a list of options as the user is typing

**URL:** <https://community.weweb.io/t/how-to-autofill-an-input-text-field-from-a-list-of-options-as-the-user-is-typing/7325>\
**Category:** How do I?\
**Created:** [February 28, 2024, 5:15pm UTC](https://community.weweb.io/t/how-to-autofill-an-input-text-field-from-a-list-of-options-as-the-user-is-typing/7325 "2024-02-28T17:15:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![niknik39](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@niknik39](https://community.weweb.io/u/niknik39)\
**Post date:** [February 28, 2024, 5:15pm UTC](https://community.weweb.io/t/how-to-autofill-an-input-text-field-from-a-list-of-options-as-the-user-is-typing/7325/1 "2024-02-28T17:15:15Z")

</div>

I have an input field that is to be populated from a dropdown menu with a list of options, but the list can be very long. I want the user to be able to simply start typing a letter or two and the field to pre-populate or provide a suggestion with the first partial match in the list, then simply Enter to select it. Is there a way to do this?

Right now, the user has to scroll down the menu and select, but it’s not a great experience for longer lists.

---

<div class="post-metadata">

**Author:** ![sam1](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/sam1/32/6724_2.png) [@sam1](https://community.weweb.io/u/sam1)\
**Post date:** [February 28, 2024, 9:19pm UTC](https://community.weweb.io/t/how-to-autofill-an-input-text-field-from-a-list-of-options-as-the-user-is-typing/7325/2 "2024-02-28T21:19:19Z")

</div>

You could try filtering the list of options by what they have typed in the input. I don’t think that would solve the enter to select it. Another option which I have done before is to create a custom dropdown component that has an input and a list of options underneath it I did this so that people could create there own new responses rather then selecting from the dropdown.

Hope this gives you some ideas.

---

<div class="post-metadata">

**Author:** ![niknik39](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@niknik39](https://community.weweb.io/u/niknik39)\
**Post date:** [July 10, 2024, 6:05pm UTC](https://community.weweb.io/t/how-to-autofill-an-input-text-field-from-a-list-of-options-as-the-user-is-typing/7325/3 "2024-07-10T18:05:16Z")

</div>

Here’s how I solved this in case anyone finds it useful:

I wrote a Java Script to trigger (on change) search all the values in a list of objects, as the user is typing, and create a modified list of objects with the key-values I need to display in my list (empty to start).

```auto
// Here's my JavaScript
const searchString = <input variable>
const jsonArray = <array to filter on>
const results = [];

// If the search string is empty, return an empty array
    if (searchString.trim() === "") {
        return [];
    }

// Iterate over each object in the jsonArray
for (let i = 0; i < jsonArray.length; i++) {
    const obj = jsonArray[i];
    let matchFound = false;
    const resultObj = {};

    // Iterate over each key in the current object
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            // Check if the value of the current key contains the search string
            if (String(obj[key]).toLowerCase().includes(searchString.toLowerCase())) {
                // If there's a match, add the id, name, and legal_des to resultObj
                if (obj.hasOwnProperty("id")) {
                    resultObj.id = obj.id;
                }
                if (obj.hasOwnProperty("name")) {
                    resultObj.name = obj.name;
                }
                if (obj.hasOwnProperty("legal_des")) {
                    resultObj.legal_des = obj.legal_des;
                }
                matchFound = true;
                // No need to continue searching through other keys
                break;
            }
        }
    }

    // If a match was found, add resultObj to the results array
    if (matchFound) {
        results.push(resultObj);
    }
}

    return results;

```

* * *

I still don’t have a solution for selecting the top value and using keyboard to navigate down the list so that I can enter to select it. I need to spend more time on that, for now this will do.

---

<div class="post-metadata">

**Author:** ![Kawwl](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kawwl/32/14297_2.png) [@Kawwl](https://community.weweb.io/u/Kawwl)\
**Post date:** [July 10, 2024, 6:50pm UTC](https://community.weweb.io/t/how-to-autofill-an-input-text-field-from-a-list-of-options-as-the-user-is-typing/7325/4 "2024-07-10T18:50:51Z")

</div>

Cool solution! But i think this is already achievable from the select element, by turning on searchable? I can search for “or” hit enter and “orange” will be selected.

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/75be6b646955c1a534eb31b5617486566ab89c45.png)