Text suggestion feature for Google Docs extension

Other Questions Google docs
1

I’m working on a Google Docs extension and need help with a text suggestion feature. Here’s what I want to do:

When users type a specific symbol like {{, I want to show them a list of suggestions. This list should update as they type more letters. The suggestions come from a fixed set of less than 100 terms.

I’ve looked through the Google Apps Script docs and some GitHub examples, but I can’t find anything that fits. It’s kind of like the ‘@’ menu in Google Docs, where you can quickly add stuff.

Here’s a simple example of what I mean:

function showSuggestions(text) {
  const suggestions = ['apple', 'banana', 'cherry'];
  return suggestions.filter(s => s.startsWith(text));
}

Has anyone done something like this before? Any ideas on how to make it work? It doesn’t have to be a Google Docs add-on if there’s an easier way. Thanks for any help!

2

hey emcarter, i’ve done smth similar b4. u could try using the DocumentApp.getUi() method to create a custom menu or sidebar. then, use onEdit() trigger to detect when ‘{{’ is typed. for suggestions, maybe store them in a spreadsheet and fetch as needed. good luck with ur project!

3

I’ve tackled a similar challenge in the past. One approach you might consider is utilizing the DocumentApp.getUi() method to implement a custom sidebar. This sidebar could house your suggestion list and update dynamically as the user types. For detecting the ‘{{’ trigger, you could employ an onEdit() trigger function that monitors changes in the document. As for managing your suggestions, storing them in a separate Google Sheet and fetching them as needed could provide flexibility and ease of maintenance. Keep in mind that performance might become an issue with larger datasets, so you may need to implement some form of caching or filtering on the client-side to ensure smooth operation.

4

I’ve actually implemented something quite similar for a client recently. Instead of using Google Apps Script, we opted for a Chrome extension approach. It gave us more flexibility and better performance, especially for real-time suggestions.

We used a content script to inject our code into Google Docs. The script listened for the ‘{{’ trigger and then displayed a custom overlay with suggestions. We stored the suggestion list in the extension’s local storage for quick access.

The trickiest part was positioning the overlay correctly as the user typed. We had to account for scroll position and text wrapping. It took some trial and error, but we got it working smoothly.

If you’re open to exploring beyond Google Apps Script, a Chrome extension might be worth considering. It does require more setup, but it offers greater control over the user interface and interaction.