How can I add search text highlight in ghost-search

Developer help
1

Hi There,

I have implemented ghost search in my project but also want to add search text highlight in my search results. Can any one help me that how can I implement that?

I have used ghost-search that uses fuzzysort. Something like this screenshot attached.

Much Thanks!

searcg highlight
searcg highlight631×592 41.2 KB

2

I have recently done this for my Nikko theme using the fuse js library.

I am planning to create a blog post, explaining how this can be done.

3

Can this be done in the ghost-search? ghost-search - npm

I have already integrated this but just need highlighted text on search.

4

I guess it’s possible, that one uses fuzzysort in the background, so you can look into that.

5

Yes in fuzzysort they have fuzzysort.highlight(result, open='<b>', close='</b>') but there is no instruction how to do it or integrate it on ghost-search api

{
host: ‘’,
key: ‘’,
version: ‘v2’,
input: ‘#ghost-search-field’,
results: ‘#ghost-search-results’,
button: ‘’,
development: false,
defaultValue: ‘’,
template: function(result) {
let url = [location.protocol, ‘//’, location.host].join(’’);
return ‘’ + result.title + ‘’;
},
trigger: ‘focus’,
options: {
keys: [
‘title’
],
limit: 100,
threshold: -3500,
allowTypo: false
},
api: {
resource: ‘posts’,
parameters: {
limit: ‘all’,
fields: [‘title’, ‘slug’],
filter: ‘’,
include: ‘’,
order: ‘’,
formats: ‘’,
},
},
on: {
beforeDisplay: function(){},
afterDisplay: function(results){},
beforeFetch: function(){},
afterFetch: function(){}
}
}