Search

JsPlumb offers a reverse text search engine on the contents of each of the nodes/groups/edges in a given JsPlumb Toolkit instance.

Setup

Using the search package is straightforward:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {});
const index = new Index(toolkit)

At this point we have an instance of the search index, linked to the given Toolkit instance.

Usage

The search index exposes a single search(s:string) method:

toolkit.addNode({id:"1", foo:"bar"})

const results = index.search("bar")

results is an object of type jsPlumbToolkitSearchResults:

Options

In the code snippets shown above, we instantiate a search index with all of its defaults. But the search index constructor takes an optional second argument containing options for the index. The options type is:

Interface jsPlumbToolkitSearchIndexOptions

Name	Type	Description
caseSensitive?	boolean	Whether or not the search index should ignore case. By default this is false.
exclusions?	Array<string>	Optional list of field names to omit from the documents stored for each node. This means that any field in this list will not be indexed.
fields?	Array<string>	Optional list of fields to index. By default this is empty, meaning all fields (minus any exclusions) will be indexed.
limit?	number	Optional limit for the number of result a search should return. Defaults to 10.