https://github.com/khaliqgant/simple-list-filter

Super simple js to to filter items using a dropdown menu
https://github.com/khaliqgant/simple-list-filter

Last synced: 4 days ago
JSON representation

Super simple js to to filter items using a dropdown menu

• Host: GitHub
• URL: https://github.com/khaliqgant/simple-list-filter
• Owner: khaliqgant
• Created: 2013-12-26T16:23:30.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-02-25T02:50:04.000Z (almost 11 years ago)
• Last Synced: 2024-12-10T04:05:56.740Z (about 1 month ago)
• Language: JavaScript
• Size: 637 KB
• Stars: 2
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Simple List Filter

=====

Some super simple JS to to filter items using a dropdown menu. Includes a jQuery version and a pure Javascript version.

Install with bower ````bower install simple-list-filter ````

Requirements

------

Simple List Filter was made to be as modifiable and as easy to use as possible:

* The dropdown filters must be enclosed in an element with a class of "filters"

* The filter category should be the dropdown text ie: ````Cat````

* The ul enclosing the filters should be preceded with a "js" and end with "filter", ex: "js-desiredFilter-filter"

* The filter should be the link text within an li ie: ````
Playful
````


```

    


        Cat

        


            
Playful

        

        Food

        


            
Chicken

        

    

```


* The items to be filtered should be within a ul with an id of "kjg-simple" (kjg being my initials #vain)

* The li item should have a class of js-filter-item and data attributes should specify the filter category

```

    


        


            

        

    

```


Warranty/License

--------

There's no warranty of any kind. If you find a bug, please report it or submit a pull request with a fix. It's provided completely as-is; if something breaks, you lose data, or something else bad happens, the author(s) and owner(s) of this add-on are in no way responsible.

Why did you make this?

--------

Well, there are several plugins to filter items but none seemed to be modifiable and modular enough for what I need it for. I left the styling and markup as simplistic as possible so you can simply copy the JS code into your project and make it look however you want.

There are a plethora of (more robust) plugins out there to filter items:

* List.js (http://listjs.com/)

* Quicksand (http://razorjack.net/quicksand/)

* Filtrify (http://luis-almeida.github.io/filtrify/)

I also wanted to write some pure javascript so figured this would be a good exercise. The pure javscript version may or may not work in IE, I haven't tested it to be honest.