Migrate autocomplete

Autocomplete (type-ahead) suggests possible completions as users type, helping them find content faster and reducing empty search results.

🚧

Important

Search & Navigation and Graph autocomplete work differently, so you cannot migrate them directly.

• Search & Navigation autocomplete – Suggests search phrases from two sources: phrases you add manually in the Admin UI, and phrases from previous searches that returned results.
• Graph autocomplete – Suggests values from your content fields (such as page titles, product names, or tags). It reads directly from the content stored in your CMS.

Because they use different data sources, you cannot transfer your Search & Navigation autocomplete phrases or settings to Graph. You need to set up Graph autocomplete as a new feature. Verify that Graph's approach meets your needs before starting.

Key differences

Set up Graph autocomplete

Graph autocomplete requires no configuration or admin setup. It works immediately on indexed content. For full implementation details, parameters, and examples, see Graph Autocomplete Documentation.

The following query demonstrates a basic autocomplete request:

{
  StandardPage(limit: 0) {
    autocomplete {
      MetaKeywords(value: "Alloy", limit: 3)
    }
  }
}

The following query demonstrates a response to the previous basic autocomplete request:

{
  "data": {
    "StandardPage": {
      "autocomplete": {
        "MetaKeywords": [
          "Alloy Track",
          "Alloy Events",
          "Alloy News"
        ]
      }
    }
  }
}

For a complete frontend implementation example, see how the Music Festival sample site uses Graph autocomplete to suggest artist and stage names as users type in the search field.

Use autocomplete with searchable fields

Graph autocomplete works only on fields typed as StringFilterInput. Most CMS string properties (such as Name) are indexed as SearchableStringFilterInput by default, which does not support autocomplete.

To use autocomplete on a searchable field, create a new field that returns the same value using the Conventions API IncludeField method. Fields added through the IncludeField are indexed as StringFilterInput, which supports autocomplete.

For example, add a method to your content type that returns the value you want to use for autocomplete:

public string AutocompleteName() => PageName;

Then register it using the Conventions API in an initializable module:

conventionRepo.ForInstancesOf<ProductPage>()
    .IncludeField(x => x.AutocompleteName());

After syncing content, the AutocompleteName field appears as StringFilterInput in GraphQL and supports autocomplete:

{
  ProductPage(limit: 0) {
    autocomplete {
      AutocompleteName(value: "Alloy", limit: 3)
    }
  }
}