[story] Add interactive search bar

[jwflory]

Summary

Add a search bar to search through existing profiles

Background

A search bar would be a nice touch to sort through the profiles that exist on the site. Not only would it include name, but it might also include things like major or graduation year. It would make the site easier to navigate as more and more profiles are added over time.

Details

This is probably very hard and might not be possible within Jekyll. That said, we wanted to put this out there as an open-ended research question to explore what future options might be to implement this.

Currently it is not a high-priority story, but it is a "nice to have" task.

Outcome

Easy to sort and filter through profiles as more are added

[jwflory]

I did some casual research into this today. There are a few options I found. This Jekyll forum thread about site search was a useful reference.

Simplest, but doesn't work for our use case

A custom Google or DuckDuckGo search is the simplest way to add site search. However, it redirects you to a search engine interface, so you are basically doing a search engine search limited to a specific URL regex. While this would technically work, I don't think it is the best user experience for what this story had in mind when we opened it:

• Google Custom Search Engine
• DuckDuckGo search box
• Stylizing DuckDuckGo site-search

Best option (?), but mildly complex

Lunr.js might be the best fit for what we actually want to accomplish here. It is a client-side JavaScript search library that would allow us to search the page and probably do some clever logic to change how the page is rendered. But to get it working nicely with our project might be tedious and difficult. But, this might still be possible. It needs more research around user experience for how search results are rendered before this is confirmed as a solid option (i.e. we want to search on the existing site and show a certain profile, or set of profiles, based on search terms).

Some reading references:

• Jekyll search using lunr.js
• Setting up lunr.js in Jekyll

Powerful but not possible in GitHub Pages

There is an npm package, Simple-Jekyll-Search, that offers more powerful search functionality. But it would require bundling a npm package with our app and running it in the same environment as the Jekyll site. This is not possible in GitHub Pages.

[ct-martin]

In JavaScript do a case-insensitive string match, then set style="display:none;"/similar on the ones you don't want to show. Before each search, reset the show/hide state of all of them. If you don't need fuzzy matching, which I don't think we do for this, many libraries are probably overkill.

As an aside: https://stories.algolia.com/a-search-engine-in-css-b5ec4e902e97