Autocomplete

Autocomplete in Optimizely Graph predicts the rest of a word a user is typing, also known as word completion, type-ahead, or search-as-you-type. Use it in a search box or in facet navigation to help visitors form valid queries quickly and find more relevant results. Autocomplete provides the following advantages:

• Prevents queries with no results.
• Prevents spelling mistakes.
• Speeds up query creation and result retrieval.
• Gives visitors ideas for other queries to use.

Implement autocomplete as part of a search box and search in facets as part of the navigation.

Retrieve autocomplete suggestions using the autocomplete root-level field, similar to facets. With this output field, you can get autocomplete suggestions for all fields with the type StringFilterInput, including nested fields like ContentLink.GuidValue. Autocomplete is not supported for other field types, but you can use full-text search to match fields of type SearchableStringFilterInput. Autocomplete lets visitors get values to filter on, making a page more relevant to them.

Autocomplete supports two input arguments:

• value
  • Can be one or more words in the same word order.
  • Each word can be up to 10 characters; words longer than 10 characters return no suggestions.
  • If value consists of only an empty string, then no autocomplete suggestions are retrieved.
  • Punctuation characters are ignored when matching.
  • HTML tags do not match with results.
• limit (Optional)
  • Default is 10.
  • Not supported higher than 1,000.
  • Set to 0 as the input argument of the content type for best performance. The default is 0 when no where is used. For example, BiographyPage(limit:0).

Multiple fields

Use autocomplete to request suggestions for several fields in one query so a single response can populate multiple inputs in the search experience.

Select one or more fields in autocomplete:

{
  BiographyPage {
    autocomplete {
      ContentLink {
        GuidValue(value: "3e53")
      }
      Status(value: "pub")
    }
  }
}

The autocomplete suggestions are returned as a list in the projected autocomplete field:

"data": {
  "BiographyPage": {
    "autocomplete": {
      "ContentLink": {
        "GuidValue": [
          "4eaece75-3e53-440b-8dec-eb8d6d6895e0"
        ]
      },
      "Status": [
        "Published"
      ]
    }
  }
}

Multi-valued fields with higher cardinality

Autocomplete is useful when a field is multi-valued and has a higher cardinality, because the most relevant suggestions surface first and the reader can scan a focused list instead of every possible value.

{
  BiographyPage {
    autocomplete {
      Tags(value: "peo", limit: 5)
    }
  }
}

The values in Tags overlap with items, and more relevant suggestions are ranked higher. So the following suggestions can be returned, limited by the top five suggestions as requested:

"data": {
  "BiographyPage": {
    "autocomplete": {
      "Tags": [
        "People who committed suicide",
        "People who are Nobel laureates",
        "Bletchley Park people",
        "British people of World War II",
        "Colony of Jamaica people"
      ]
    }
  }
}

Use multiple words

Pass multiple words to value when the reader is typing a phrase, so the suggestions match the full phrase rather than each word in isolation.

Retrieve autocomplete suggestions using phrases:

{
  BiographyPage {
    autocomplete {
      Tags(value: "who are")
    }
  }
}

The following example returns suggestions that contain the phrase who are like this:

"data": {
  "BiographyPage": {
    "autocomplete": {
      "Tags": [
        "People who are Nobel laureates"
      ]
    }
  }
}

Use special characters and punctuation

Autocomplete supports non-ASCII characters and ignores punctuation when matching, so search inputs in any language return suggestions while symbol-only queries return nothing.

This query with special characters returns suggestions with special characters:

{
  BiographyPage {
    total
    autocomplete {
      Tags(value: "mùa thu Hà Nội")
    }
  }
}

This query returns results with HTML tags:

{
  BiographyPage {
    total
    autocomplete {
      Tags(value: "<p>mainbody</p>\\n<p>m&ugrave;mùa thu Hà Nội nổi bật với lá vàng rơi&nbsp;</p>")
    }
  }
}

However, this query does not return any suggestions because Optimizely does not support matching on punctuation characters:

{
  BiographyPage {
    total
    autocomplete {
      Tags(value: "!@#$%^&")
    }
  }
}

Combine with filter and search

Combine autocomplete with the where input argument to keep suggestions in sync with the filtered result set, so the reader only sees values that can match the current query.

Combine autocomplete with filtering and search using the where input argument. The autocomplete suggestions are refined to the result set. The result set is also narrowed down by the autocomplete value used.

📘

Note

Optimizely has set the limit to 0 in the content type for best performance.

{
  BiographyPage(
    limit:0,
    where: { Tags: { in: ["People who committed suicide", "People who are Nobel laureates"] } }
  ) {
    total
    autocomplete {
      Tags(value: "who", limit: 5)
    }
  }
}

The following example returns suggestions that only match the three items:

"BiographyPage": {
  "total": 3,
  "autocomplete": {
    "Tags": [
      "People who committed suicide",
      "People who are Nobel laureates",
      "People who have received posthumous pardons"
    ]
  }
}

Combine with facets

Return autocomplete suggestions and facet counts in the same query so the reader can choose a suggestion and immediately see how many results each facet value yields.

Combine autocomplete suggestions with facets. The facets returned are determined by the narrowed-down search results (items) by applying the autocomplete value as a filter:

{
  BiographyPage {
    total
    autocomplete {
      Tags(value: "nobe", limit: 5)
    }
    facets {
      Tags (limit: 5) {
        name
        count
      }
    }
  }
}

Response:

"data": {
  "BiographyPage": {
    "total": 2,
    "autocomplete": {
      "Tags": [
        "People who are Nobel laureates",
        "French Nobel laureates",
        "Nobel laureates in Chemistry",
        "Nobel laureates in Physics",
        "Nobel laureates with multiple Nobel awards"
      ]
    },
    "facets": {
      "Tags": [
        {
          "name": "People who are Nobel laureates",
          "count": 2
        },
        {
          "name": "People who committed suicide",
          "count": 2
        },
        {
          "name": "1867 births",
          "count": 1
        },
        {
          "name": "1912 births",
          "count": 1
        },
        {
          "name": "1934 deaths",
          "count": 1
        }
      ]
    }
  }
}