Search enhancement - position on page

[zeigerpuppy]

I have implemented search as recommended with lunr-hugo and the indexing works well.

I'm wondering, however, if it's possible for the search to also go to the appropriate place on the target page. When I click on a search result it takes me to the right page but the search result target may be quite far down the page in long documents.

It would be excellent if the search did two extra things:

1. scrolled the page to the appropriate point (or at least section)
2. highlighted the search text

[matcornic]

Hello @zeigerpuppy

Thanks for your ideas.

Actually, your second point is already present with acutal theme (you can see it in demo here: http://matcornic.github.io/hugo-learn-doc/cont/markdown/). You may have to refresh your browser cache, in order to update Javascript... #47

For the first point, it's a good idea, but I don't think this is easy to implement. Do you want to look into it and create and PR ?

[zeigerpuppy]

I can have a bit of a look if it's possible. I guess that the indexing may have to be altered to also include a reference to the relevant section...

[matcornic]

@zeigerpuppy that might be it :). But first, you could test to trigger the search function of the browser.
I'm not sure the UX is good, and it's possible that it does not work for everybody. But it's worth a try.

https://stackoverflow.com/questions/22487959/search-and-scroll-to-word-on-page

[zeigerpuppy]

@matcornic, using window.find() sounds like it would be good enough for my use case currently.

I've been looking into this a bit more.
It seems that lunr makes it a bit difficult to use the query results that are used to generate a search result: olivernn/lunr.js#161

Am I right that the best place to insert the code will be in js/search.js?

In particular, I see this function which I think it may be possible to append a window.find(query) to the result returned.

/**
 * Trigger a search in lunr and transform the result
 *
 * @param  {String} query
 * @return {Array}  results
 */
function search(query) {
    // Find the item in our index corresponding to the lunr one to have more info
    return lunrIndex.search(query).map(function(result) {
            return pagesIndex.filter(function(page) {
                return page.uri === result.ref;
            })[0];
        });
}


// Let's get started
initLunr();
$( document ).ready(function() {
    var horseyList = horsey($("#search-by").get(0), {
        suggestions: function (value, done) {
            var query = $("#search-by").val();
            var results = search(query);
            done(results);
        },
        filter: function (q, suggestion) {
            return true;
        },
        set: function (value) {
            location.href=value.href;
        },
        render: function (li, suggestion) {
            var uri = suggestion.uri.substring(1,suggestion.uri.length);
            var indexOfIndex = uri.lastIndexOf("/index");
            if (indexOfIndex == -1) {
                indexOfIndex = uri.length;
            }
            var href = uri.substring(uri.indexOf("/"), indexOfIndex);
            suggestion.href = baseurl + href;


            var query = $("#search-by").val();
            var numWords = 2;
            var text = suggestion.content.match("(?:\\s?(?:[\\w]+)\\s?){0,"+numWords+"}"+query+"(?:\\s?(?:[\\w]+)\\s?){0,"+numWords+"}");
            suggestion.context = text;
            var image = '<div>' + '» ' + suggestion.title + '</div><div style="font-size:12px">' + (suggestion.context || '') +'</div>';
            li.innerHTML = image;
        },
        limit: 10
    });
    horseyList.refreshPosition();
});

This may be really naive, but I wonder if replacing the following may work:

Replace:

suggestion.href = baseurl + href;

with:

suggestion.href = baseurl + href + window.find(query);

[zeigerpuppy]

Hmmm, I knew it wouldn't be that simple.
But this does work if you type it manually into the address bar...

javascript:window.find("searchword")

[gwleclerc]

We could use a query param which will set on click over the search result. This param should be processed by a function when the window is ready. Then it will use this JQuery selector: https://api.jquery.com/contains-selector/ to find element which contains searched text into the current page and make the page scroll to it.