The solution requires understanding how the SAP CX Search API handles autocomplete extension differently from standard event handlers. Let me address each of the focus areas systematically:
Event Handler Registration:
The problem is that you’re using the standard event listener approach (.on(‘autocomplete’)), but the search widget’s autocomplete functionality uses a provider registration pattern instead. Replace your current code with proper provider registration:
var customProvider = {
getSuggestions: function(query, context) {
return getContextSuggestions(query, currentCase);
},
priority: 10
};
searchWidget.registerSuggestionProvider('contextAware', customProvider);
The key difference is using registerSuggestionProvider instead of the .on() event listener. The priority property (higher = executes first) ensures your provider runs before or after the default provider depending on your needs.
Search Extension Hooks:
The knowledge base search widget in scx-2105 provides specific extension hooks that must be configured during initialization. Add this to your search widget configuration:
var searchConfig = {
extensions: {
autocomplete: {
providers: ['contextAware', 'default'],
mergeStrategy: 'combine'
}
}
};
searchWidget.initialize(searchConfig);
The extensions.autocomplete.providers array defines which suggestion providers are active and in what order. The mergeStrategy determines how multiple provider results are combined - ‘combine’ merges results from all providers, while ‘replace’ uses only the first provider that returns results.
Event Propagation:
The reason your original event handler never fired is that the autocomplete event doesn’t propagate through the standard event chain when using the Search API’s provider system. The widget calls registered providers directly rather than emitting events. To maintain event-driven architecture while using providers, implement a provider that emits custom events:
getSuggestions: function(query, context) {
var suggestions = getContextSuggestions(query, currentCase);
searchWidget.trigger('custom:suggestions:loaded', suggestions);
return suggestions;
}
This way you can still listen for custom events in other parts of your application while properly integrating with the search provider system.
Complete Implementation:
Here’s the full pattern for context-aware knowledge base autocomplete:
- Define your suggestion provider with context awareness:
var contextAwareProvider = {
getSuggestions: function(query, context) {
// Access current case context
var caseCategory = context.currentCase?.category;
// Filter KB articles by category and query
return kbService.searchByCategoryAndQuery(caseCategory, query)
.then(function(results) {
return results.map(function(article) {
return {
text: article.title,
value: article.id,
metadata: { category: article.category }
};
});
});
},
priority: 15 // Higher than default (10)
};
- Register the provider during widget initialization:
searchWidget.on('initialized', function() {
searchWidget.registerSuggestionProvider('contextAware', contextAwareProvider);
});
- Configure the search widget to use multiple providers:
searchWidget.configure({
autocomplete: {
enabled: true,
providers: ['contextAware', 'default'],
minQueryLength: 2,
debounceInterval: 300
}
});
The provider pattern is the correct approach for search autocomplete in SAP CX. Standard event handlers don’t work because the search widget’s architecture is designed around pluggable providers rather than event propagation. Once you switch to the provider registration approach, your context-aware suggestions will execute properly and can even be combined with the default suggestion provider for a richer autocomplete experience.