How to add a search bar?


#21

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


#22

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


#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: