Combining autocomplete/search and decorations

v6
1

Looking for some suggestions on the best way to approach the following so that I can hopefully avoid going down the wrong path …

I am looking to provide an experience to the user where they can seamlessly search across names/descriptions instead of unique identifiers (that are not human friendly or memorable) when writing a query. For example, let’s say we want the user to write the following simplified SQL query:

SELECT * FROM employees WHERE uuid=12345

But instead of knowing the uuid of the employee, we want the user to be able to search using any of the fields in the dataset’s record:

{
    name: Mr Brown,
    uuid: 12345,
    title: CCG (Chief Coffee Getter),
    phone: 555-0001
}

Specifically we want the user to be able to enter:

SELECT * FROM employees WHERE user= followed by brown, or ccg, or coffee, or … Once resolved, the user would see SELECT * FROM employees WHERE [user=Mr Brown] (Imagine the [user=Mr Brown] is a widget to show the user this is a placeholder)

So the question is, what are suggestions for the best approach? Should I try to combine the existing autocomplete functionality with some decoration? Or would I be better of writing a custom widget based on an input element and do all the logic in that widget? Or am I thinking about this the wrong way?

Thanks in advance

2

If you want these to look and act like regular completions, @codemirror/autocomplete is the way to go. If you want them displayed inline in the actual document, you’ll want a custom solution. I cannot really tell the details of how this would work from your description.