Autocomplete for Text Input Column

Developers Central
1

Howdy, I am wondering if anyone has stumbled upon this use case before or if there is some piece of the reference material I’m missing. I’m trying to enable a user to get autocomplete-like suggestions when inputting data in a text column, similar to how you can have Coda suggest data based on values already in the column. However I need these suggestions to be from an API return, specifically the Google Places API.

My current best guess of how to go about this would be to add 3-5 addl rows in the table and to have these special rows get their column values filled out by the API returns, so that Coda’s built-in autocomplete ‘suggestion’ feature can pick them up. Anybody have any better ideas here?

2

Hi @Kameron_Baumgardner - I think one way you could do this would be to create a custom formula in a Coda Pack. The formula would take in a query and return matching results. Here’s a mock Pack to give you the idea:

import * as coda from "@codahq/packs-sdk";
export const pack = coda.newPack();

pack.addFormula({
  name: "FindThings",
  description: "",
  parameters: [
    coda.makeParameter({
      type: coda.ParameterType.String,
      name: "query",
      description: "",
    }),
  ],
  resultType: coda.ValueType.Array,
  items: { type: coda.ValueType.String },
  execute: async function (args, context) {
    let [query] = args;
    // This is where would call the Google Places API.
    // In this example I'm just generating dummy values from the query.
    let results = [];
    for (let i = 0; i < 10; i++) {
      results.push(query + " " + i);
    }
    return results;
  },
});

In your Coda doc you would add a table with two columns:

  1. A text column where the user enters the query terms.
  2. A select list column where the user selects the result.

The options of the select list are dynamically generated by your Pack formula:

image

image

It would be better if this could all be done in one column, but for the time being I think it may be the best pattern.

1 Like
3

Thank you for the reply @Eric_Koleda! Yeah I had thought about using a selectList but was aiming to get the autocomplete predictions into the text column ‘suggestions’ UX flow. I’ll see if this is a workaround my client can live with for now.

Do you see any reasons why my hack of having the autocomplete predictions pushed to the column values in some pack-specific rows wouldn’t work? Just out of sheer curiosity, I’m sure pretty much every step in that isn’t a ‘best-practice’ pattern.

4

I think the biggest blocker is that no other formula can pick up on the user-entered value until after they hit enter. The cell isn’t really changed until the user hits enter, and then the formulas can fire. I also don’t know the inner workings of the suggestion framework for text cells, so I’m not sure what it would take to get values to be populated there, how frequently they refresh, etc.

1 Like
5

Thanks! I dropped an idea in the suggestion box to add the ability to set these suggestions via formula or to add an option in the makeColumn packmethod in the SDK that would let you specify a different function for these suggestion values.

Appreciate the help!