• Stars
    star
    2,150
  • Rank 21,457 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JS Search is an efficient, client-side search library for JavaScript and JSON objects

Installation | Overview | Tokenization | Stemming | Stop Words | Search Index | Index Strategy

Js Search: client-side search library

Js Search enables efficient client-side searches of JavaScript and JSON objects. It is ES5 compatible and does not require jQuery or any other third-party libraries.

Js Search began as a lightweight implementation of Lunr JS, offering runtime performance improvements and a smaller file size. It has since expanded to include a rich feature set- supporting stemming, stop-words, and TF-IDF ranking.

Here are some JS Perf benchmarks comparing the two search libraries. (Thanks to olivernn for tweaking the Lunr side for a better comparison!)

If you're looking for a simpler, web-worker optimized JS search utility check out js-worker-search.


If you like this project, πŸŽ‰ become a sponsor or β˜• buy me a coffee


Installation

You can install using either Bower or NPM like so:

npm install js-search
bower install js-search

Overview

At a high level you configure Js Search by telling it which fields it should index for searching and then add the objects to be searched.

For example, a simple use of JS Search would be as follows:

import * as JsSearch from 'js-search';

var theGreatGatsby = {
  isbn: '9781597226769',
  title: 'The Great Gatsby',
  author: {
    name: 'F. Scott Fitzgerald'
  },
  tags: ['book', 'inspirational']
};
var theDaVinciCode = {
  isbn: '0307474275',
  title: 'The DaVinci Code',
  author: {
    name: 'Dan Brown'
  },
  tags: ['book', 'mystery']
};
var angelsAndDemons = {
  isbn: '074349346X',
  title: 'Angels & Demons',
  author: {
    name: 'Dan Brown',
  },
  tags: ['book', 'mystery']
};

var search = new JsSearch.Search('isbn');
search.addIndex('title');
search.addIndex(['author', 'name']);
search.addIndex('tags')

search.addDocuments([theGreatGatsby, theDaVinciCode, angelsAndDemons]);

search.search('The');    // [theGreatGatsby, theDaVinciCode]
search.search('scott');  // [theGreatGatsby]
search.search('dan');    // [angelsAndDemons, theDaVinciCode]
search.search('mystery') // [angelsAndDemons, theDaVinciCode]

Tokenization

Tokenization is the process of breaking text (e.g. sentences) into smaller, searchable tokens (e.g. words or parts of words). Js Search provides a basic tokenizer that should work well for English but you can provide your own like so:

search.tokenizer = {
  tokenize( text /* string */ ) {
    // Convert text to an Array of strings and return the Array
  }
};

Stemming

Stemming is the process of reducing search tokens to their root (or "stem") so that searches for different forms of a word will still yield results. For example "search", "searching" and "searched" can all be reduced to the stem "search".

Js Search does not implement its own stemming library but it does support stemming through the use of third-party libraries.

To enable stemming, use the StemmingTokenizer like so:

var stemmer = require('porter-stemmer').stemmer;

search.tokenizer =
	new JsSearch.StemmingTokenizer(
        stemmer, // Function should accept a string param and return a string
	    new JsSearch.SimpleTokenizer());

Stop Words

Stop words are very common (e.g. a, an, and, the, of) and are often not semantically meaningful. By default Js Search does not filter these words, but filtering can be enabled by using the StopWordsTokenizer like so:

search.tokenizer =
	new JsSearch.StopWordsTokenizer(
    	new JsSearch.SimpleTokenizer());

By default Js Search uses a slightly modified version of the Google History stop words listed on www.ranks.nl/stopwords. You can modify this list of stop words by adding or removing values from the JsSearch.StopWordsMap object like so:

JsSearch.StopWordsMap.the = false; // Do not treat "the" as a stop word
JsSearch.StopWordsMap.bob = true;  // Treat "bob" as a stop word

Note that stop words are lower case and so using a case-sensitive sanitizer may prevent some stop words from being removed.

Configuring the search index

There are two search indices packaged with js-search.

Term frequency–inverse document frequency (or TF-IDF) is a numeric statistic intended to reflect how important a word (or words) are to a document within a corpus. The TF-IDF value increases proportionally to the number of times a word appears in the document but is offset by the frequency of the word in the corpus. This helps to adjust for the fact that some words (e.g. and, or, the) appear more frequently than others.

By default Js Search supports TF-IDF ranking but this can be disabled for performance reasons if it is not required. You can specify an alternate ISearchIndex implementation in order to disable TF-IDF, like so:

// default
search.searchIndex = new JsSearch.TfIdfSearchIndex();

// Search index capable of returning results matching a set of tokens
// but without any meaningful rank or order.
search.searchIndex = new JsSearch.UnorderedSearchIndex();

Configuring the index strategy

There are three index strategies packaged with js-search.

PrefixIndexStrategy indexes for prefix searches. (e.g. the term "cat" is indexed as "c", "ca", and "cat" allowing prefix search lookups).

AllSubstringsIndexStrategy indexes for all substrings. In other word "c", "ca", "cat", "a", "at", and "t" all match "cat".

ExactWordIndexStrategy indexes for exact word matches. For example "bob" will match "bob jones" (but "bo" will not).

By default Js Search supports prefix indexing but this is configurable. You can specify an alternate IIndexStrategy implementation in order to disable prefix indexing, like so:

// default
search.indexStrategy = new JsSearch.PrefixIndexStrategy();

// this index strategy is built for all substrings matches.
search.indexStrategy = new JsSearch.AllSubstringsIndexStrategy();

// this index strategy is built for exact word matches.
search.indexStrategy = new JsSearch.ExactWordIndexStrategy();

More Repositories

1

react-virtualized

React components for efficiently rendering large lists and tabular data
JavaScript
26,161
star
2

react-window

React components for efficiently rendering large lists and tabular data
JavaScript
15,571
star
3

react-error-boundary

Simple reusable React error boundary component
TypeScript
6,712
star
4

react-resizable-panels

TypeScript
3,668
star
5

react-highlight-words

React component to highlight words within a larger body of text
JavaScript
2,153
star
6

progress-estimator

Logs a progress bar and estimation for how long a Promise will take to complete
JavaScript
2,139
star
7

redux-search

Redux bindings for client-side search
JavaScript
1,404
star
8

react-virtualized-select

HOC that uses react-virtualized and react-select to display large lists of options in a drop-down
JavaScript
1,165
star
9

react-devtools-experimental

Experimental rewrite of the React DevTools extension
966
star
10

react-window-infinite-loader

InfiniteLoader component inspired by react-virtualized but for use with react-window
JavaScript
894
star
11

react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized
TypeScript
600
star
12

planner

Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas
JavaScript
545
star
13

react-presents

React slideshow framework
JavaScript
499
star
14

angular-form-for

Set of Angular directives to simplify creating and validating HTML forms.
JavaScript
428
star
15

js-worker-search

JavaScript client-side search API with web-worker support
JavaScript
415
star
16

react-flame-graph

React component for visualizing profiling data
JavaScript
390
star
17

suspense

Utilities for working with React Suspense
TypeScript
353
star
18

jest-react-profiler

Jest helpers for working with the React Profiler API.
JavaScript
278
star
19

highlight-words-core

Utility functions shared by react-highlight-words and react-native-highlight-words
JavaScript
229
star
20

react-select-fast-filter-options

react-select filterOptions function optimized to quickly filter large options lists
JavaScript
207
star
21

redux-devtools-filterable-log-monitor

Filterable tree view monitor for Redux DevTools
JavaScript
155
star
22

personal-logger

Webapp for tracking personal diet, sleep, and general wellness
JavaScript
124
star
23

react-highlight.js

A simple React wrapper around the Highlight.js library
JavaScript
106
star
24

use-context-menu

React components for displaying configurable context menus
TypeScript
93
star
25

debounce-decorator

Decorator for debouncing class methods
JavaScript
93
star
26

forward-js-2017

Forward - Web Technology Summit
JavaScript
85
star
27

infinite-list-reflow-examples

Examples illustrating reflow handling with infinite lists
JavaScript
62
star
28

tweets

Twitter-like demo with limited functionality
JavaScript
56
star
29

react-devtools-tutorial

Interactive tutorial featuring the React DevTools v4
JavaScript
55
star
30

turdle

Wordle clone dedicated to πŸ’©
JavaScript
55
star
31

jasmine-promise-matchers

Custom matchers for use with Jasmine 1.3 - 2.2 and Angular Promise objects.
JavaScript
51
star
32

babel-repl

React powered Babel REPL
JavaScript
42
star
33

extensions-api-proposal-custom-performance-pane

Extensions API proposal for the Performance Panel
36
star
34

react-window-table

JavaScript
34
star
35

immutable-js-store

Tiny observable wrapper around Immutable JS with rewind/replay support
JavaScript
34
star
36

task-runner

Async utilities for JavaScript application development with a focus on interruptibility and error-handling
JavaScript
34
star
37

live-stream-deep-dive-react-profiler

Source from live stream "Deep dive with the React DevTools profiler"
JavaScript
32
star
38

react-window-vs-react-virtualized-synced-grids

Comparison of react-virtualized MultiGrid to two react-window synced Grids
JavaScript
29
star
39

fps-measurer

Tiny testing utility for gathering FPS statistics
JavaScript
29
star
40

react-suspend-in-parallel

TypeScript
29
star
41

console.pretty

Pretty console logging
JavaScript
27
star
42

palettable

Generates an HTML color palette from SASS or Stylus source.
JavaScript
26
star
43

jasmine-es6-promise-matchers

ES6 Promise compatible Jasmine matchers
JavaScript
24
star
44

print-color

Utility for printing colored text in Node or the Browser
JavaScript
21
star
45

scheduling-profiler-prototype

Custom profiler prototype for React's concurrent mode
JavaScript
18
star
46

ng2-virtualized

Angular 2 components for efficiently rendering large, scrollable lists and tabular data
JavaScript
18
star
47

react-ascii-image

React component that displays image data as colored text
JavaScript
18
star
48

react-resizable-panels-demo-ssr

TypeScript
16
star
49

connect-tech-2016

Connect Tech 2016 presentation
JavaScript
14
star
50

react-wait-to-render

A function, component and mixin to defer component rendering until all required props are present
JavaScript
13
star
51

forms-js

Core forms-js library
JavaScript
12
star
52

faux-codesandbox-client

Example Code Sandbox and React DevTools v4 integration
JavaScript
11
star
53

react-conf-2018-profiling-keynote

2018 React Conf Profiling keynote
JavaScript
10
star
54

resume

HTML
10
star
55

bsky

Bluesky web UI (just for fun)
TypeScript
8
star
56

flat-object

Utilities for working with nested data structures
JavaScript
7
star
57

source-map-parsing-benchmark

JavaScript
6
star
58

react-immutable-js-store

React wrapper around immutable-js-store
JavaScript
6
star
59

test-extension-network-caching

JavaScript
6
star
60

react-devtools-triage-bot

GitHub bot for labeling and assigns bug reports for React DevTools that don't include repro info
JavaScript
5
star
61

jasmine-object-matchers

Custom object equality matchers for use with Jasmine 2.0.
JavaScript
5
star
62

react-createRoot-Suspense-async-act

JavaScript
4
star
63

game-of-life

TypeScript
3
star
64

react-devtools-inline-node-and-web-poc

JavaScript
3
star
65

test-github-issue-template

https://gh-community.github.io/issue-template-feedback/structured
3
star
66

test-named-hooks

Example create-react-app project meant to test React DevTools named hooks functionality
JavaScript
3
star
67

temp-devtools-profiler

Partial fork of React DevTools for testing Profiler plugin UI
JavaScript
3
star
68

TaskManager

Task Manager is an ActionScript library designed to simplify the implementation of asynchronous processes. This article is an introduction-to (and overview-of) the library.
3
star
69

stardew-valley-fishing

Silly fishing mini-game
TypeScript
3
star
70

bootstrap-select-button

Creates an Angular-friendly bindable button dropdown using the Bootstrap CSS framework
JavaScript
3
star
71

parcel-alpha-postcss-bug

JavaScript
2
star
72

test-github-actions

JavaScript
2
star
73

galaxiga-upgrade-tool

Web app to accompany Galaxiga mobile game
TypeScript
2
star
74

jqolor

JavaScript color picker built on top of jQuery and Bootstrap.
JavaScript
2
star
75

bvaughn

2
star
76

.github

2
star
77

bug-repro-suspense-cache-read-extra-renders

JavaScript
1
star
78

briandavidvaughn

Angular website
HTML
1
star
79

example-eslint-rule-override-issue

Repro
JavaScript
1
star
80

react-suspense-transition-demo-app

Demo app
TypeScript
1
star
81

website

Personal website
TypeScript
1
star
82

SoundClouDownloader

Chrome extension enabling automatic downloads of any SoundCloud track, even when download option is disabled
JavaScript
1
star
83

gatsby-remark-prismjs-react-live-bug

Shows a bug between the 'gatsby-remark-prismjs' plugin and the 'react-live' library
CSS
1
star
84

transcluder

Another Angular directive to help with multiple transclusion within a single directive
JavaScript
1
star
85

jest-uncaught-error-repro

JavaScript
1
star
86

reflex-unit

Automatically exported from code.google.com/p/reflex-unit
HTML
1
star
87

TaskManagerCoffeeScript

CoffeeScript
1
star