Jalibut

Jalibut is an open-source "search ahead" based directory that can be used to showcase any collection of entities. Try out the demo here.

Why?

Jalibut stems from the need to live search collections of entities. It could be anything: repositories, projects, cars, specimens... the list is endless. Jalibut provides a simple platform to elegantly showcase collections and live search them with nothing more than clean CSS, a JSON directory and some JavaScript to search it.

Usage

Jalibut is just a framework to help you quickly get started with showcasing a collection. Use it as is, or build on it to make your content more accessible.

You can see a gallery of projects that have used Jalibut on the showcase page. If you would like to add your project to the list, just submit a PR with the relevant info.

Regex

Jalibut supports regex right out of the box. Simply use regex in the search bar and it will filter. Note that because of live search, you may get nonsensical (or even no results) as you're typing but the correct result should render once you have finished the expression. A basic example? Try typing in "pattamar|deep" and see what happens.

If you're not sure what regex is, it's worth having a read about it here. You can also test and learn about using regex on Portable Regex.

Data

All searchable data is stored as a JSON array in the file objects.js. Three example attributes (name, image, and description) are provided to make it easy to get started:

"name": "Dhow",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Dhow_znz.jpg/300px-Dhow_znz.jpg",
"description": "A heavy ship, the traditional deep-sea dhow."

You can add your own data by simply replacing the values for name, image, and description with your own. If you want to add more kinds of data, that's easy too: just add the new data pairs to objects.js and adjust the following html template in quicksearch.js to your liking:

content+= "<div class='searchable-item card'>" + "<h3>" + name + "</h3>" + "<br>" + "<img src='" + image + "'>" + "<br>" + description + "</div>";

Importing

You can import your data into Jalibut using the online Jalibut Data Format Conversion Tool, which converts data in a variety of formats into Jalibut JSON objects. Just paste your data (separated by tabs, commas, or other separators) into the textbox and click on the Format for Jalibut button. There is an option to pre-fill the data entry box with sample data to see how the converter works.

The converter can auto-detect header rows in your data. Just select the Header row radio button above the textbox. By default auto-detection is off, in which case rows are numerically labelled as a sequence of fields.

For example, given the following tab-separated data:

name	image	description
Name	image.jpg	Description

With the Header row option, the converter will produce the following result:

var inputstream = [{
    "name": "Name",
    "image": "image.jpg",
    "description": "Description"
}];

The same data (without the header row):

Name	image.jpg	Description

With the Header row option turned off, this will give the following result:

var inputstream = [{
    "field1": "Name",
    "field2": "image.jpg",
    "field3": "Description"
}];

This JSON can be pasted directly into objects.js in your Jalibut folder. Note: If search is not working after replacing objects.js, make sure that you have updated the variable names in quicksearch.js to match the header names in your data (by default these are set to name, image, and description.)

Browser Support

Note: The list below is not exhaustive and serves only as a guideline. Please submit a pull request to update the list.

	Browser	Support
	Arora (v0.11.0)
	Chromium (v65.0)
	Firefox (v61.0)
	Google Chrome (v69.0)
	Konqueror (v4.14.16+)
	Midori (v0.4.3)
	QupZilla (v1.6.0)
	rekonq (v2.4.2)
	Stock Android (v4.3.1)
	Opera (v30.0)
	Dillo (v3.0.3)
	Edge
	Safari (MacOS and iOS)

Credits

• Alrra for providing browser logos.
• Isotope for their highly configurable layouts.

Licence

MIT. See Licence file for details.