How to add a search bar?

Help
21

Yes, I do have posts less than 400 and still it have records more than 8000.

1 Like
22

Anyone who wants to use Lunr.js, I put up a small tutorial on Jekyll Codex.

1 Like
23

I just found this thread :slight_smile:
I wrote my own php script to generate a json file: (it looks for a pageTitle, and a container ID)

then a wee bit of js:

$.ajaxSetup({ cache: false });
 $('#query').keyup(function(){
    $('#queryResult').html('');
    searchField = $('#query').val();
    expression = new RegExp(searchField, "i");
    $.getJSON('/assets/search.json', function(data) {
        $.each(data, function(key, value){
            if (value.url.search(expression) != -1 || value.content.search(expression) != -1 || value.title.search(expression) != -1) {
                var n = value.content.search(expression)-50;
                var excerpt = value.content.substring(n, n+300);
                if(searchField!='') {
                    var highlight = excerpt.split(expression).join("<span class='shadow bg-primary text-white rounded px-1'>"+searchField+"<\/span>");
                    value.title = value.title.split(expression).join("<span class='shadow bg-primary text-white rounded px-1'>"+searchField+"<\/span>");
                } else {
                    var highlight = excerpt;
                }
                $('#queryResult').append('<li class="list-group-item link-class"><img src="/assets/images/search-blue.svg" alt="search" class="searchIcon" /><a class="pl-5" href="'+value.url+'">'+value.title+'<\/a><span class="text-muted"> ...'+highlight+'... <\/span><a href="'+value.url+'">read more &rArr;<\/a><\/li>');
            }
        });
    });

seems to work for me … demo:

2 Likes
24

I actually used Algolia, following the recommendations in this thread, and I’m very happy with it. I even wrote a blog post about why and how I integrated my Jekyll site with Algolia:

Blog post: Jekyll and Algolia search integration

1 Like
25

i’m personally using the duck… you can see the source at cregox.net

this is the basic “setup”:

<form name="searchForm" class="search" method="get" action="https://duckduckgo.com" onsubmit="return duckFix();">
<input type="hidden" name="kam" value="osm">
<input type="text" name="q" placeholder="duck search" value='"cregox" site:cregox.net'>
<input type="submit" value="🔎">
</form>

but i’ll migrate out of jekyll (mostly microsoft really) soon enough (probably to gatsbyjs) and also move to searx or something.

thanks for introducing me to lunr, i’ll sure try it as well.

true foss is much more important than a few milliseconds in end user performance today + it will always greatly surpass any non-foss in all senses when everyone use it.