{"id":16414007,"url":"https://github.com/khaliqgant/simple-list-filter","last_synced_at":"2026-05-12T20:39:45.334Z","repository":{"id":12782437,"uuid":"15456035","full_name":"khaliqgant/Simple-List-Filter","owner":"khaliqgant","description":"Super simple js to to filter items using a dropdown menu","archived":false,"fork":false,"pushed_at":"2014-02-25T02:50:04.000Z","size":652,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-06T14:13:43.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khaliqgant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-26T16:23:30.000Z","updated_at":"2019-06-09T11:24:38.000Z","dependencies_parsed_at":"2022-08-30T23:41:01.029Z","dependency_job_id":null,"html_url":"https://github.com/khaliqgant/Simple-List-Filter","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaliqgant%2FSimple-List-Filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaliqgant%2FSimple-List-Filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaliqgant%2FSimple-List-Filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaliqgant%2FSimple-List-Filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khaliqgant","download_url":"https://codeload.github.com/khaliqgant/Simple-List-Filter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240451096,"owners_count":19803392,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T06:53:00.666Z","updated_at":"2026-05-12T20:39:45.276Z","avatar_url":"https://github.com/khaliqgant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Simple List Filter\n=====\n\nSome super simple JS to to filter items using a dropdown menu. Includes a jQuery version and a pure Javascript version.\n\nInstall with bower ````bower install simple-list-filter ````\n\nRequirements\n------\nSimple List Filter was made to be as modifiable and as easy to use as possible:\n* The dropdown filters must be enclosed in an element with a class of \"filters\"\n* The filter category should be the dropdown text ie: ````\u003ca class=\"js-dropdown\" href=\"#\"\u003eCat\u003c/a\u003e````\n* The ul enclosing the filters should be preceded with a \"js\" and end with \"filter\", ex: \"js-desiredFilter-filter\"\n* The filter should be the link text within an li ie: ````\u003cli\u003e\u003ca href=\"#\"\u003ePlayful\u003c/a\u003e\u003c/li\u003e````\n\n```\n    \u003cdiv class=\"filters\"\u003e\n        \u003ca class=\"js-dropdown\" href=\"#\"\u003eCat\u003c/a\u003e\n        \u003cul class=\"js-cat-filter\"\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003ePlayful\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003ca class=\"js-dropdown\" href=\"#\"\u003eFood\u003c/a\u003e\n        \u003cul class=\"js-food-filter\"\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eChicken\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n```\n\n* The items to be filtered should be within a ul with an id of \"kjg-simple\" (kjg being my initials #vain)\n* The li item should have a class of js-filter-item and data attributes should specify the filter category\n\n```\n    \u003cul id=\"kjg-simple\"\u003e\n        \u003cli class=\"js-filter-item\" data-food-filter=\"Bacon\" data-cat-filter=\"\"\u003e\n            \u003cimg class=\"list-item\" src=\"assets/bacon.jpg\"\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n```\n\nWarranty/License\n--------\nThere'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.\n\nWhy did you make this?\n--------\nWell, 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.\nThere are a plethora of (more robust) plugins out there to filter items:\n* List.js (http://listjs.com/)\n* Quicksand (http://razorjack.net/quicksand/)\n* Filtrify (http://luis-almeida.github.io/filtrify/)\n\nI 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhaliqgant%2Fsimple-list-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhaliqgant%2Fsimple-list-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhaliqgant%2Fsimple-list-filter/lists"}