# How to add a search bar?

**URL:** <https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606>\
**Category:** Help\
**Created:** [June 4, 2017, 7:42am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606 "2017-06-04T07:42:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [June 4, 2017, 7:42am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/1 "2017-06-04T07:42:16Z")

</div>

How we can add a search bar in Jekyll website.

---

<div class="post-metadata">

**Author:** ![tomjohnson1492](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/tomjohnson1492/32/39_2.png) [@tomjohnson1492](https://talk.jekyllrb.com/u/tomjohnson1492)\
**Post date:** [June 4, 2017, 11:36pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/2 "2017-06-04T23:36:32Z")

</div>

See these tutorials on search from CloudCannon: [https://learn.cloudcannon.com/jekyll-search/](https://learn.cloudcannon.com/jekyll-search/)

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [June 8, 2017, 9:04am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/3 "2017-06-08T09:04:29Z")

</div>

Here is an example of a super simple site-search (using Google):

```
<form method="get" action="http://www.google.com/search" target="_blank">
<input type="hidden" name="sitesearch" value="ibkc-carrosserie.nl" />
<input type="text" name="q" maxlength="255" placeholder="Search with Google" />
</form>

```

Note that the domainname needs to be changed (currently ‘[ibkc-carrosserie.nl](http://ibkc-carrosserie.nl)’). See the full code at: [https://github.com/jhvanderschee/oocinfo/blob/master/\_includes/footer.html](https://github.com/jhvanderschee/oocinfo/blob/master/_includes/footer.html). The live website can be found here: [http://ibkc-carrosserie.nl/](http://ibkc-carrosserie.nl/).

---

<div class="post-metadata">

**Author:** ![Arcath](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/arcath/32/184_2.png) [@Arcath](https://talk.jekyllrb.com/u/Arcath)\
**Post date:** [June 9, 2017, 11:39am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/4 "2017-06-09T11:39:37Z")

</div>

You can use a Javascript search like lunr.

> **[Setting up lunr.js in Jekyll](https://www.arcath.net/2016/02/setting-up-lunr-js-in-jekyll/)**
>
> In-Website searching for Jekyll using lunr.js

---

<div class="post-metadata">

**Author:** ![Jordan](https://avatars.discourse-cdn.com/v4/letter/j/eb9ed0/32.png) [@Jordan](https://talk.jekyllrb.com/u/Jordan)\
**Post date:** [July 21, 2017, 1:59pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/5 "2017-07-21T13:59:23Z")

</div>

i have made a search feature for a Jekyll shop. using this method shown here

[http://kushagragour.in/blog/2015/06/search-in-jekyll-blog/](http://kushagragour.in/blog/2015/06/search-in-jekyll-blog/)

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [September 2, 2017, 12:52pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/6 "2017-09-02T12:52:51Z")

</div>

So, if we add the search bar on what basis it will show the search results?

On the basis of category or tags or keyword?

---

<div class="post-metadata">

**Author:** ![Jordan](https://avatars.discourse-cdn.com/v4/letter/j/eb9ed0/32.png) [@Jordan](https://talk.jekyllrb.com/u/Jordan)\
**Post date:** [September 2, 2017, 1:19pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/7 "2017-09-02T13:19:46Z")

</div>

On build it will build an xml file to search… I used a bit of ymal call search terms

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 12, 2017, 8:50am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/8 "2017-10-12T08:50:49Z")

</div>

I have tried to add the search bar. But it didn’t go well.

Is there any other option?

---

<div class="post-metadata">

**Author:** ![ckruse](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/ckruse/32/16_2.png) [@ckruse](https://talk.jekyllrb.com/u/ckruse)\
**Post date:** [October 13, 2017, 1:22am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/9 "2017-10-13T01:22:57Z")

</div>

Have you looked into [Algolia](https://www.algolia.com/)?

There’s a Jekyll plugin to auto-sync data from a standard Jekyll blog ([link](https://github.com/algolia/algoliasearch-jekyll)).

If you’re doing more than a blog, a quick search on Github will pull up a number of results (including a few I’ve made over the years). I’d recommend starting with their [instantsearch library](https://community.algolia.com/instantsearch.js/).

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 4, 2018, 8:00am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/10 "2018-08-04T08:00:23Z")

</div>

Algolia it is quite expensive.

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [August 4, 2018, 3:46pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/11 "2018-08-04T15:46:06Z")

</div>

They have a free tier for open source projects.

> **[Algolia for Open Source | Algolia](https://www.algolia.com/for-open-source)**
>
> Submit your open source or non-profit project and use Algolia's world-class search solution for free. Read more about the details to qualify!

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 4, 2018, 4:14pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/12 "2018-08-04T16:14:25Z")

</div>

Currently I have 380 blog posts on my website.

When I run the command `jekyll algolia`, it upload all the data to Algolia website and turn out, it filled `8100 queries` from `10000`.

Which is not a good?

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 4, 2018, 4:17pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/13 "2018-08-04T16:17:21Z")

</div>

So, I use [Lunr.js](http://lunrjs.com/) and it worked perfectly, free and open source project.

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [August 4, 2018, 5:01pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/14 "2018-08-04T17:01:33Z")

</div>

I have over 1000 posts on my site and haven’t max’d out any of the free tier.

Lunr is fine. Algolia in my experience does a better job and is more performant.

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 4, 2018, 5:09pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/15 "2018-08-04T17:09:02Z")

</div>

> [@mmistakes](#):
>
> I have over 1000 posts on my site and haven’t max’d out any of the free tier.

How did you do that?

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [August 4, 2018, 5:40pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/16 "2018-08-04T17:40:01Z")

</div>

I’m not doing anything special, just `jekyll algolia` same as you.

I’m using 2,790 / 10,000 records and about 525 search queries in the last 24 hours. My understanding is the records are tied to the posts and their data. Add more posts and that goes up.

Queries depend on how active your site is and the amount of searches performed.

Your records seem pretty high for having a fourth of the posts I have. Maybe login to your Algolia dashboard and check the indices.

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 5, 2018, 7:48am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/17 "2018-08-05T07:48:10Z")

</div>

Yeah, it is 8375 records.

Here’s the records

![chrome_2018-08-05_13-14-03](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/b/b6dbb7bad0564444bc1e8576e8ef14875466855c.png)

Here’s the indices

![2018-08-05_13-17-17](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/b/b92cb58ec3de43a2b34b7a551fd3f76450b73982.png)

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [August 6, 2018, 1:46am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/18 "2018-08-06T01:46:58Z")

</div>

Seems a bit high to me. What exactly is it indexing? Do you have a lot of attributes?

For reference I have a ton of posts and are no where close to hitting 10,000.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/9/99ed4c3e1ca8e7a8f6101645f79e72e9175aeafc.jpeg)

Looks like for me it’s indexing about 10 attributes per post (title, content, tags, type, date, excerpt, slug, url, etc.) on my site.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/7/7790516a3e4313841cc208c11d29a48cb7a509d6.jpeg)

Maybe you could leave an issue on the Algolia plugin’s GH to inquire how to reduce the records indexed.

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [August 6, 2018, 5:44am UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/19 "2018-08-06T05:44:08Z")

</div>

# Attributes

![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/d/d145b5486a7641715b422063dbccf6493911cc36.png)

![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/0/06dc3714bbb4bcc2bcae3662f9e568ab7a11407c.png)

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [August 6, 2018, 2:22pm UTC](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606/20 "2018-08-06T14:22:55Z")

</div>

There’s your issue. Didn’t you say you had less than 400 posts? According to what Algolia is indexing you have over 8,000.

Explains why you’re almost at 10,000 records.

[Next page](https://talk.jekyllrb.com/t/how-to-add-a-search-bar/606.md?page=2)
