christian-fei / simple-jekyll-search Goto Github PK
View Code? Open in Web Editor NEWA JavaScript library to add search functionality to any Jekyll blog.
Home Page: https://christian-fei.github.io/Simple-Jekyll-Search/
License: MIT License
A JavaScript library to add search functionality to any Jekyll blog.
Home Page: https://christian-fei.github.io/Simple-Jekyll-Search/
License: MIT License
Could you minify the "jekyll-search.js" file and make it available at "bower.json"?
Like this:
"ignore": [
"*",
"!dest/jekyll-search.min.js",
"!dest/jekyll-search.js",
"!README.md"
],
Thank you :)
I've been using this JS plugin with a documentation site, which meant I needed to search through pages rather than posts. This is the code I used:
---
title: nil
---
{% assign items = site.pages %}
[
{% for item in items %}{% if item.url != '/search.json' %}{% if item.url != '/css/screen.css' %}
{
"title" : "{{ item.title }}",
"content" : {{ item.content | jsonify }},
"url" : {{ item.url | jsonify }}
}{% unless forloop.last %},{% endunless %}{% endif %}{% endif %}
{% endfor %}
]
I've swapped the posts for pages, but using an assigned variable so I'm not repeating myself. I've also used the jsonify filter to clean up the content and url incase it has anything that will clash with json syntax.
The only problem is that I had to exclude the search.json and the outputted CSS using two conditional statements, I'm not sure why it thinks they are pages. Thoughts?
Build Warning: Layout 'none' requested in search.json does not exist.
The search only seems to filter the first 10 items, I realise this is a limit to results shown but I think it's also limiting the amount of items it looks at in the json file, might be this line here.
It would be nice to expose the search function in order to be able to programmatically trigger the search.
Currently it seems that the json file is retrieved on page load via an XHR.
I think it would be better to make the XHR when the input is focused, i.e the user intends to do a search.
So, when the results container shows up, one cannot navigate to the search results with keyboard up/down.
Steps to reproduce:
th
.Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Expected:
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Now, this probably is Jekyll-related but the code snippet we use to generate seaarch.json is causing this
[
{% for page in site.pages %}
{
"title" : "{{ page.title | escape }}",
"url" : "{{ site.baseurl }}{{ page.url }}",
"date" : "{{ page.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
If I remove escape
it seems to work.
Another issue I see is with pages having empty titles.
[
{% for page in site.pages %}
{% if page.title != nil %}
{
"title" : "{{ page.title }}",
"url" : "{{ site.baseurl }}{{ page.url }}",
"date" : "{{ page.date }}"
} {% unless forloop.last %},{% endunless %}
{% endif %}
{% endfor %}
]
This works, i.e. only outputs pages with title, but then the plugin complains it can't find search.json.
So, how do you think I should proceed here @christian-fei ?
I want to type in the search field and hit enter / search and then see a separate results page, not live results on same page.
Currently, only a part of the MIT License is included, which is attached to the end of README.md.
Because the license is not in a LICENSE file and the copyright notice is missing, it is very hard, if not impossible, to use Simple-Jekyll-Search without violating §2 of the license:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
How does one add an image next to the text returns?
for example:
I search "Apple"
And I get the result apple and next to it an image.
I'm making my jekyll site relative, and designed to be deployed in a subdirectory off of a domain. This poses some problems with Jekyll-Search's ability to format correct links in the results.
When I click on a search result, the URL prepends a forward slash, like this:
/pageresult.html
As a result, the page doesn't load because I have my jekyll site in a directory such as domain/folder/subfolder/
When I click /pageresult.html, it goes to this:
domain/pageresult.html
instead of:
domain/folder/subfolder/pageresult.html
How can I remove the "/" before the page result? If the result would simply go to pageresult.html, it would load the page.
In the script, the searchResultTemplate shows this:
searchResultTemplate: '<li><a href="{url}" title="{{page.title}}">{title}</a></li>',
I tried to determine how {url} gets populated from jekyll-search.js, but I couldn't see how to apply any kind of filter to remove the "/". Can you help? Thanks,
Tom
I recently updated this script. But unlike before, this version is disappearing the results. It is occurred when I pressed arrow key to choose the page link or edit searching words. Please check this issue.
Awesome library. Very helpful.
I am working on a two-blog jekyll website. To show posts for each blog I just use an if statement within a for loop:
{% for post in site.posts %}
{% if post.blog contains '1' %}
...
{% endif %}
{% endfor %}
where blog
is a variable in the yaml front matter of a post. It would be helpful to restrict search for the posts with a blog variable that equals to 1 for blog one and to 2 for blog 2. I am thinking the easiest would be filtering the results that get displayed under the search box, ex. g. for blog one only show the results that haveblog
variable equal to one.
I am not sure how to do that. Possibly, specify filtering in the script as an option.
Great work.
Hi?
I am not sure this is related to this project though--bc it's JS thing, I hope there is such function. I tried by myself, but was not easy to me. I think this helps others too~ I you don't have plan on this thing, please close this issue immediately.
Thanks ^^/
p.s. Shame on me, uuuugly code... but my approach was,
$('#search').on('keydown', function(e) {
if (e.keyCode !== 38 && e.keyCode !== 40) {
return;
}
var target = $('#search-results').find('li');
if (! window.current) {
if (target.length < 1) {
return;
}
window.current = target.first();
} else {
window.current = (e.keyCode === 40) ? target.next().first() : target.prev().first();
}
window.current.get(0).focus();
});
I was using the version of this search that shipped with the theme I am using for my blog. https://github.com/jacobtomlinson/carte-noire/tree/gh-pages/js
Everything was fine.
Now I saw that there is an uncompressed build and I wanted to use that one to make minor changes. When plugging in (changing dataSource to json, removing .init) the search shows nearly all blog posts as search results even though the search word is not contained. Same behaviour for the current minified version I pulled with bower.
Any hints what changes might cause this to break compared the old version?
I was just following the instructions in the readme, it looks like the bower package is broken.
The dest
folder never gets populated. it's just empty.
Thanks!
Is this possible with this plugin?
First of all, thx for that work.
Maybe some information are missing.
I am not an expert in JavaScript.
Here is the problem and the workaround :
PROBLEM
When I integrated jekyll-search.js in my project, I got errors :
"couldn't find the searchInput or searchResults element"
WORKAROUND
IMPROVEMENT TO DO
Thx for time you can spend on it.
NOTE
line 12 : searchInput = document.querySelector(".search")
line 16 : searchResults = document.querySelector(".results")
Noticed the new version shows results in a list, does this mean that there's an option for a container on just the results?
"simple-jekyll-search": "^1.2.0"
user@pc:~/Documents/proyecto$ gulp
[11:20:08] Using gulpfile ~/Documents/proyecto/gulpfile.js
[11:20:08] Starting 'sass'...
[11:20:08] Starting 'js'...
[11:20:08] Finished 'js' after 2.53 ms
[11:20:08] Starting 'jekyll-build'...
Configuration file: _config.yml
Source: /home/user/Documents/proyecto
Destination: /home/user/Documents/proyecto/_site
Incremental build: disabled. Enable with --incremental
Generating...
[11:20:09] Finished 'sass' after 681 ms
Liquid Exception: no implicit conversion of Integer into String in search.json
jekyll 3.5.0 | Error: no implicit conversion of Integer into String
[11:20:10] 'jekyll-build' errored after 1.26 s
[11:20:10] Error: 1
at formatError (/home/user/.nvm/versions/node/v8.1.2/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/formatError.js:20:10)
at Gulp.<anonymous> (/home/user/.nvm/versions/node/v8.1.2/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/log/events.js:41:15)
at emitOne (events.js:115:13)
at Gulp.emit (events.js:210:7)
at Gulp.Orchestrator._emitTaskDone (/home/user/Documents/proyecto/node_modules/orchestrator/index.js:264:8)
at /home/user/Documents/proyecto/node_modules/orchestrator/index.js:275:23
at finish (/home/user/Documents/proyecto/node_modules/orchestrator/lib/runTask.js:21:8)
at ChildProcess.cb (/home/user/Documents/proyecto/node_modules/orchestrator/lib/runTask.js:29:3)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
If I remove | escape
from "title" : "{{ post.title | escape }}",
(search.json) works fine.
Any chance you'll be adding support for Jekyll 2.1.0 Collections?
Hi, there.
So here's what I'm trying to do; instead of only searching through files, I'm trying to search through a collection's IDs so that each result can link to that anchor. Here's a sort of pseudo code of what I'm trying to achieve:
---
layout: null
---
[
{% assign sorted_pages = site.faq | sort: 'title' %}
{%- for page in sorted_pages -%}
{% assign headers = page.content | split: 'h2' %} // Split each header
{%- for header in headers -%}
{
"title" : {{ header | strip_html | jsonify }},
"url" : "{{ site.baseurl }}{{ page.url }}",
"content" : {{ header | strip_html | normalize_whitespace | jsonify }}
"id" : {{ header | split: 'id=' | first | jsonify }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
My FAQ entries have a consistent Markdown syntax; they all follow this scheme:
## header
Content
## next header
More content
...
This doesn't work of course, so I'm wondering if @christian-fei you have any ideas how to achieve this.
This recipe should make search a lot more flexible if we manage to get it to work :)
Hi guys,
I would like test this plugin on my jekyll project, but i don't know how work the plugin. Do you have example ?
Should I put up a form? It is a little fuzzy for me ^^
Thank you !
And perhaps the results container should close if it loses focus too?
A few of my post titles have ascii code (e.g. colons :
and slashes /
), and while they render just fine in the post pages they show up as plain text in the search results. Is there any way I can modify searchResultTemplate
to render these codes as the proper characters? Right now I'm using
searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>'
I presume I just need to add something to the {title}
variable, e.g. { title | renderascii }
or something like that.
Hi there more a comment that an issue, i do it because i cost me a lot to find the answer...
if you want to use this search to look uppon all collection items you only need to change the posts for documents it always better with an example...
this is what you have...
[
{% for post in site.posts %}
{
"title" : "{{ post.title | escape }}",
"category" : "{{ post.category }}",
"tags" : "{{ post.tags | array_to_sentence_string }}",
"url" : "{{ site.baseurl }}{{ post.url }}",
"date" : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
for search in all collections use this..
[
{% for post in site.documents %}
{
"title" : "{{ post.title | escape }}",
"category" : "{{ post.category }}",
"tags" : "{{ post.tags | array_to_sentence_string }}",
"url" : "{{ site.baseurl }}{{ post.url }}",
"date" : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
i hope it help somebody
Hi.
Current /dest/ build is broken due required Templater.js, Repository.js, JSONLoader.js and OptionsValidator.js are not included.
This explains the new ultra tiny build size, too :)
Happy easter,
midzer
How is it possible to have a result page if hitting ENTER? Thanks! (BTW really nice Script)
I've implemented the plugin and it's working perfectly, however I've noticed it's searching the url content in the json file. Some of the pages in my Jekyll site are nested, which means they come up in the results for top level pages.
Could an option be made to exclude or omit them?
exclude: url, …
Hi.
We are getting a script error with IE9 in Bootstrap.
SCRIPT575: Could not complete the operation due to error c00c023f.
jekyll-search.js, line 1 character 625
This might help: http://stackoverflow.com/questions/7287706/ie-9-javascript-error-c00c023f
Using version 1.0.8.
BTW, is it possible to provide an unminified build too? It would help debugging.
It does nothing, even in the example. If no results are found, the container just stays blank.
Hi, i was going to open an issue saying search was poor but i figured out (partly) why. The guide says to use.
{% for post in site.posts %}
{
"title" : "{{ post.title | escape }",
"category" : "{{ post.category }}",
"url" : "{{ post.url }}",
"date" : "{{ post.date }}"
} {% if forloop.last %}{% else %},{% endif %}
{% endfor %}
Looking at the json file for your website i found you used the "desc" tag. My searches went from rubbish to good once this was included. Notably a title of "code" would only match "c" in search where code in a description would match the full and partial word.
Secondly theres no mention of how to incorporate tags from #1
Cheers for this script, it works very well when set up correctly.
I've had to prevent my search form from submitting when people press enter, it was adding "?" to the url and therefore refreshing the page. I used the following to prevent it:
document.getElementById('search-field').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
I'm guessing this wouldn't be an issue if I didn't use a <form>
element? Still might be good to prevent any submission?
Hey,
I just noticed in the latest version, installed from bower, that when the form field has been typed in, and then the characters deleted that when the last character is deleted it does not remove the results and it does not auto close the results dropdown.
The same implementation code and css works when I grabbed the js from your demo site.
EDIT: Looks like this bug was introduced in the v1.1.1 build as in v1.1.0 this functionality works as expected.
https://github.com/christian-fei/Simple-Jekyll-Search/releases/tag/v1.1.1
D
When I use the search.json which not enable the full-text search, do work very well to search the post.
But When I replace the search.json to enable the full-text search, it donot work anymore and it cannot search nothing and even no feedback with "No find results" .
I donot know the reason.
I might have missed something but is this package published to npm? Couldn’t find it in the registry but as it has a package.json and is not private I expected to find it there.
The results are rendered even when the text input's value hasn't changed. This caused issues when I attempted to navigate the search results with up/down arrows.
I've been using this awesome search on my website. I'd like the search to also be able to search through a post's content. Here's my search.json:
---
layout: null
---
[
{% for post in site.posts %}
{
"title" : "{{ post.title | escape }}",
"category" : "{{ post.category }}",
"tags" : "{{ post.tags | array_to_sentence_string }}",
"url" : "{{ site.baseurl }}{{ post.url }}",
"date" : "{{ post.date }}",
"content" : "{{ post.content }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
Including content disables the .js. Any clue why? Any recommended changes the .js to make it also search through the content?
Thanks!
I run jekyll build, jekyll serve, but it doesn't find the module and the search doesn't work. My repo is listed as twhite96.
I don't exactly know what is happening here or if I've done it right. Noob with Jekyll.
Any help would be appreciated.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.