# How to create automatic search suggestions based on text input like this?

**URL:** <https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987>\
**Category:** Ask for Help\
**Created:** [November 18, 2024, 2:02am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987 "2024-11-18T02:02:12Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [November 18, 2024, 2:02am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/1 "2024-11-18T02:02:12Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c087df844cb21e43a096e827c4df932d9a06101.png)

Can we do this in our apps? As the user types, a dropdown list of search suggestions appear.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 18, 2024, 2:05am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/2 "2024-11-18T02:05:31Z")

</div>

Not exactly, although you can get a very similar effect with a custom search and a collection.

That said, it seems that almost anything is possible these days with CSS and/or the AI component, so who knows 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [November 18, 2024, 2:16am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/3 "2024-11-18T02:16:30Z")

</div>

for my main search I use the collection approach for displaying results (it’s the same custom search that you taught me 🙂 ) but I also wanted to have a neat way of suggesting search words to the user based on app data.

This way, they can select from a given set of search words and apply it to the search.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [November 18, 2024, 2:18am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/4 "2024-11-18T02:18:16Z")

</div>

You unfortunately can’t use query collection inside the AI Component. The query column won’t show up.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [November 18, 2024, 2:20am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/5 "2024-11-18T02:20:52Z")

</div>

hmm… I prompted chatGPT and it gave this answer but I don’t know how feasible it is in Glide:

```auto
let input = p1.toLowerCase().trim(); // User input
let allWords = p2.split(","); // List of suggestions (comma-separated)
let filtered = allWords
    .filter(word => word.toLowerCase().includes(input)) // Match suggestions
    .slice(0, 5); // Limit to 5 suggestions

// Build HTML dropdown with links
let dropdown = `<div style="background-color: white; border: 1px solid #ccc; border-radius: 5px; max-width: 300px; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);">
<ul style="list-style: none; padding: 0; margin: 0;">`;

filtered.forEach((word, index) => {
  dropdown += `
    <li style="padding: 8px; cursor: pointer; border-bottom: 1px solid #eee;">
      <a href="/detail-screen-${index}" style="text-decoration: none; color: #007bff; font-size: 14px;">
        ${word}
      </a>
    </li>`;
});

dropdown += "</ul></div>";

return dropdown;

```

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [November 18, 2024, 2:21am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/6 "2024-11-18T02:21:30Z")

</div>

I mean, yeah, it can be an idea!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [November 18, 2024, 2:22am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/7 "2024-11-18T02:22:09Z")

</div>

Try asking the AI to interpret that code snippet with a text field and make an auto completion.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [November 18, 2024, 2:22am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/8 "2024-11-18T02:22:47Z")

</div>

I’ll try it

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 19, 2024, 12:05am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/9 "2024-11-19T00:05:17Z")

</div>

Did it go well for you?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [November 19, 2024, 12:41am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/10 "2024-11-19T00:41:44Z")

</div>

no, the AI is difficult for me to instruct, lol. It keeps giving me a text entry component and a separate choice component, side by side.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [November 19, 2024, 12:42am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/11 "2024-11-19T00:42:24Z")

</div>

It will sound stupid, but it actually helps for me. Ask ChatGPT to make a prompt for Glide AI.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [November 19, 2024, 12:42am UTC](https://community.glideapps.com/t/how-to-create-automatic-search-suggestions-based-on-text-input-like-this/77987/12 "2024-11-19T00:42:46Z")

</div>

nice idea