@egoettelmann/jquery-search

1.0.1 • Public • Published

jQuery-search

A very simple and lightweight live search jQuery plugin: make your pages dynamic with two simple CSS classes.

To use this plugin, include it within your html page

<script src="jquery.search.min.js"></script>

and initialize it on an input

<script>
$('input[type="text"').jsearch();
</script>

All elements annotated with a .jsearch-row class will be filtered out if they do not include a .jsearch-field element that matches the search.

The .jsearch-field is not necessarily a text node. If it contains nested elements, the search will be performed in any of its children (see jQuery.text).

Options

You can initialize the plugin with various options, e.g. if you need to customize the two css classes you can do as below:

<script>
$('input[type="text"').jsearch({
	rowClass: '.my-custom-row-class',
	fieldClass: '.my-custom-field-class'
});
</script>

The list of available options and their default values is shown in the following table.

Name Description Default
rowClass the jQuery selector that is used to show/hide rows '.jsearch-row'
fieldClass the jQuery selector that is used to identify the searchable elements '.jsearch-field'
minLength the minimal length of the string to start the search 3
triggers the events that trigger the search 'keyup'
caseSensitive if the search has to be case sensitive or not false

If the rowClass attribute is equal to the fieldClass attribute, the search is performed in the same element that is shown/hidden.

Note: the rowClass and fieldClass attributes can be any css selectors.

Readme

Keywords

none

Package Sidebar

Install

npm i @egoettelmann/jquery-search

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

26.3 kB

Total Files

8

Last publish

Collaborators

  • egoettelmann