https://github.com/lloiser/jquery-searcher

Connects any list-like data with an input for searching. Try it here
https://github.com/lloiser/jquery-searcher

Last synced: about 2 months ago
JSON representation

Connects any list-like data with an input for searching. Try it here

• Host: GitHub
• URL: https://github.com/lloiser/jquery-searcher
• Owner: lloiser
• License: mit
• Created: 2013-12-29T21:25:16.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2016-07-24T17:41:48.000Z (almost 9 years ago)
• Last Synced: 2025-05-02T19:06:41.619Z (2 months ago)
• Language: JavaScript
• Homepage: http://lloiser.github.io/jquery-searcher/
• Size: 73.2 KB
• Stars: 68
• Watchers: 8
• Forks: 26
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery Searcher Plugin

The jQuery Searcher Plugin connects any list-like data with an input for searching.

## Installation

Download the latest [release](https://github.com/lloiser/jquery-searcher/releases/) of this plugin on GitHub.

Include the jquery.searcher.js script after the jQuery library (unless you are packaging scripts somehow else):

```html

```

## Usage

```js

$("...").searcher({

    itemSelector:  "...", // jQuery selector for the data item element

    textSelector:  "...", // jQuery selector for the element which contains the text

    inputSelector: "..."  // jQuery selector for the input element

});

```

## Example

See the live version of the following example on the [GitHub page](http://lloiser.github.io/jquery-searcher/).

Given the following HTML markup:

```html

    

        

            #1

            Like a Rolling Stone

            Bob Dylan

            1965

        

        

            #2

            (I Can't Get No) Satisfaction

            The Rolling Stones

            1965

        

        ...

    

```

And executing the following script connects the input with the table:

```js

$("#tabledata").searcher({

    inputSelector: "#tablesearchinput"

    // itemSelector (tbody > tr) and textSelector (td) already have proper default values

});

```

## Documentation

The following table contains all possible options which can be passed to the plugin.

    

        

            Name

            Type

            Description

        

    

    

    

        itemSelector

        string

        

            jQuery selector for the data item element (e.g. tr, li).


            Default: "tbody > tr"

        

    

    

        textSelector

        string

        

            jQuery selector for the element which contains the text within the item element.


            If not specified the data item element is used instead.


            Default: "td"

        

    

    

        inputSelector

        string

        

            jQuery selector for the input element which is used to filter the data.


            Default: ""

        

    

    

        caseSensitive

        bool

        

            Determines whether the search should be case sensitive or not.


            Default: false

        

    

    

        toggle

        function

        

            this function is called for each data item element when the text in the input changes.


            it is called with the data item element and a boolean value indicating whether the item contains the text or not.


            Default: function(item, containsText) { $(item).toggle(containsText); }

        

    

    

## License

Copyright (c) 2014 Lukas Beranek Licensed under the MIT license.