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

Ask for Help
1

image
image545×321 14.6 KB

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

2

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 :man_shrugging:

1 Like
3

for my main search I use the collection approach for displaying results (it’s the same custom search that you taught me :slight_smile: ) 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.

4

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

5

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

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;
6

I mean, yeah, it can be an idea!

1 Like
7

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

1 Like
8

I’ll try it

1 Like
9

Did it go well for you?

1 Like
10

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.

1 Like
11

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

1 Like
12

nice idea

1 Like