search term highlighting with elasticsearch

[John Jung]

Hello everyone,

We're using elasticsearch as our search backend. On search result pages, I'd like to show a snippet of text for each result with the search term highlighted, so users can see the context their search term was found in. Is there a configuration option in wagtail to do this? If not, how difficult of a project would it be for us to implement this?

Thanks very much for any help or advice you can provide. 

John

[Jordi J.]

Hey John I remember doing that some time ago but did it in the front-end and not in the backend. I don't have the code right now but it was a simple highlight of the the string/s the user is looking for. Ugly and dirty, you could do something like the following in your search_results.html template:

{% if search_results %}
    <script type="text/javascript">
        $('div.search-results').highlight('{{ request.GET.q }}'.split(" "));
    </script>
    <style type="text/css">
        .highlight {
            background-color: #FAFF7E;
        }
    </style>
{% endif %}

Not ideal but might be useful in your case.

Cheers

[Brett Grace]

There's no option to do this, unless it was added recently.

I did this in one of my own sites by implementing my own search backend. I basically copied the provided search backend and rewrote the query so ElasticSearch would return highlighted results. ElasticSearch isn't by default "HTML aware" so you have to deal with the fact that your fragment may contain tags (links and images), or even worse tag fragments (e.g., the last half of an anchor tag).

You can deal with this in post-processing by using lxml (or something similar) to close and strip tags, although the results aren't perfect (it doesn't really deal well with tag fragments).

Or you can pre-process the results by making sure when you index that you are inserting an additional field or document which has been stripped of HTML (you can use an ElasticSearch analyzer for this). See http://stackoverflow.com/questions/12809408/how-do-i-exclude-html-content-from-my-elasticsearch-index

Once your query is returning highlighted results, displaying them is pretty simple. By default it wraps everything it highlights in a span with CSS class that you can then customize.