{"id":17831202,"url":"https://github.com/crsten/choose-bumps","last_synced_at":"2025-07-27T03:33:19.897Z","repository":{"id":57198249,"uuid":"53199272","full_name":"crsten/choose-bumps","owner":"crsten","description":"A dropdown so simple it will give you choose-bumps! Written in pure vanillajs","archived":false,"fork":false,"pushed_at":"2018-02-16T09:50:59.000Z","size":397,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-09T10:19:33.587Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://crsten.github.io/choose-bumps/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/crsten.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-05T11:58:55.000Z","updated_at":"2021-09-02T04:42:03.000Z","dependencies_parsed_at":"2022-09-16T13:12:34.163Z","dependency_job_id":null,"html_url":"https://github.com/crsten/choose-bumps","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/crsten/choose-bumps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fchoose-bumps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fchoose-bumps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fchoose-bumps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fchoose-bumps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crsten","download_url":"https://codeload.github.com/crsten/choose-bumps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fchoose-bumps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267294180,"owners_count":24065343,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-27T19:42:22.012Z","updated_at":"2025-07-27T03:33:19.875Z","avatar_url":"https://github.com/crsten.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# choose-bumps\n[![Build Status](https://travis-ci.org/crsten/choose-bumps.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/crsten/choose-bumps)\n[![npm](https://img.shields.io/npm/dt/choosebumps.svg?style=flat-square)](https://www.npmjs.com/package/choosebumps)\n[![Bower](https://img.shields.io/bower/v/choosebumps.svg?style=flat-square)]()\n[![npm](https://img.shields.io/npm/v/choosebumps.svg?style=flat-square)](https://www.npmjs.com/package/choosebumps)\n[![npm](https://img.shields.io/npm/l/express.svg?style=flat-square)]()\n\nA dropdown so simple it will give you choose-bumps! Written in pure vanillajs\n\n## Inspiration\n\nHave you ever wanted a simple dropdown library that doesn't depend on bloated frameworks? Well i did! Have fun :)\n\n## Demo\n\nYou can find a small [demo here](http://crsten.github.io/choose-bumps/).\n\n## Installation\n\nYou can get it on npm.\n\n```shell\nnpm install choosebumps --save\n```\n\nOr bower, too.\n\n```shell\nbower install choosebumps --save\n```\n\nIf you're not using either package manager, you can use `choosebumps` by downloading the [files in the `dist` folder](dist).\n\n#### Including the JavaScript\n\nPlace `choosebumps` in the end of `\u003cbody\u003e`.\n\n#### Including the CSS\n\nPlace [`dist/choosebumps.css`](dist/choosebumps.css) or [`dist/choosebumps.min.css`](dist/choosebumps.min.css) in your document.\n\n# Usage\n\nChoosebumps provides the easiest possible API to make dropdowns breeze in your applications.\n\n## `ChooseBumps(element,options?)`\n\n`element` can either be a string (selector) or an `HTMLElement` (not a jQuery element)\n\nYou can provide `options` to customize `choosebumps`. Here's an **overview of the default values**.\n\n```js\nChooseBumps(element,{\n  placeholder: 'Choose',\n  items: [],\n  minlength: 0,\n  search: false,\n  searchfields: '',\n  noresults: '',\n  multiple: false,\n  template: '{{data}}',\n  tagtemplate: null, //inherits from template if null\n  selectedtemplate: null, //inherits from template if null\n  onselect: null,\n  onremove: null,\n  onadd: null,\n  categorize: null\n});\n```\n\nThe following functions are supported on the returned instance\n\n```js\n\ncb.select(item);\ncb.remove(item);\ncb.reset();\n\n```\n\nThe options/functions are detailed below. **All the options can be set at initialization or anytime later when you feel for it(even if `choosebumps` is open or whatever)**\n\n#### `options.items`\n\nBy default `choosebumps` has no items. You can add items either by sending them in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  items: [1,2,3,4]\n});\n```\n\nor anytime later by setting `items` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.items = [5,6,7];\n```\n\nYou can also send in a string(URL) which will be fetched either dynamically when searching or when the property is being set.\nIf you want search dynamically with `choosebumps` replace the part that should be changed in the URL with `{{query}}`. It will then make a new call everytime the searchphrase changes.\n\n```js\nitems = 'https://www.yourawsomepage.com/api/user?q={{query}}' //will fetch this url and replace {{query}} with the users input\n```\n\nIt is also possible to send in a function which will be called dynamically. The function recieves 2 arguments: `function(query, callback)`. Simply call the callback function with your result when you are done.\n\n```js\nitems = function(query, cb) {\n  //Do some fetching or whatever here...\n  //Query is the users input (if search = true else null)\n  cb(RESULTARRAY) //call the callback function with the result as parameter when you are done!\n}\n```\n\n*`options.items` accepts an array, string(url) or function as input and ignores all other types.*\n\n#### `options.processing`\n\nIf you need to preprocess the fetched data before passing it to `choosebumps` you can do it with the `options.processing` property. You can set it at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  processing: function(fetched_data) {\n    //Do some stuff with your data here and pass it on...\n    return fetched_data.map(function(enrty) {\n      return {\n        firstname: entry.firstname,\n        lastname: entry.lastname\n      };\n    });\n  }\n});\n```\n\nor anytime later by setting `processing` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.processing = function Your_function(){};\n```\n\n*`options.processing` accepts a function as input and ignores all other types.*\n\n#### `options.placeholder`\n\nBy default `choosebumps` has `\"Choose\"` as the placeholder text. You can change the placeholder text either by sending them in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  placeholder: 'Choose your force now!'\n});\n```\n\nor anytime later by setting `placeholder` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.placeholder = 'Have you choosen already?';\n```\n\n*`options.placeholder` accepts a string as input and ignores all other types.*\n\n#### `options.noresults`\n\nIf you are using the `options.search` property, you can show a \"no results\" text if the current query doesn't return any results.\n\nBy default `options.noresults` is not set. You can change the noresults text either by sending them in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  noresults: 'Did not find any results for {{query}}'\n});\n```\n\nor anytime later by setting `noresults` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.noresults = 'Did not find any results for {{query}}';\n```\n\n*Hint* `{{query}}` gets replaced with the current search term.\n\n*`options.noresults` accepts a string as input and ignores all other types.*\n\n#### `options.search`\n\nBy default `choosebumps` has disabled `search`. You can activate it either by sending it to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  search: true\n});\n```\n\nor anytime later by setting `search` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.search = false;\n```\n\nWhen searching, `choosebumps` will look through each property of each item in `items`. (If item is an object)\nIf you want to define what `choosebumps` should look for remember to set `options.searchfields`.\n\n*`options.search` accepts anything as input and checks the input for its thruthiness.*\n\n#### `options.minlength`\n\nBy default `choosebumps` has minlength of 0 which means it will start searching if the length of the input is longer than 0. You can change it either by sending it to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  minlength: 2\n});\n```\n\nor anytime later by setting `minlength` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.minlength = 5;\n```\n\n*`options.minlength` accepts a number as input and sets the value to 0 for all other types.*\n\n#### `options.searchfields` (only relevant if `items` are objects)\n\nBy default `choosebumps` searches through each property in all `items`. You can define wich fields should be searched by sending a string in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  searchfields: 'firstname lastname adress' //Space separated string\n});\n```\n\nor anytime later by setting `searchfields` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.searchfields = 'firstname lastname' //Space separated string\n```\n\n*`options.searchfields` accepts a string as input and splits its content by space. All other types are ignored*\n\n#### `options.multiple`\n\nWith `options.multiple` you can allow selection of multiple items.\n\nBy default `choosebumps` has disabled `multiple` selection. You can activate it either by sending it in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  multiple: true\n});\n```\n\nor anytime later by setting `multiple` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.multiple = false;\n```\n\n*`options.multiple` accepts anything as input and checks the input for its thruthiness.*\n\n#### `options.template`\n\nThe templating in `choosebumps` is inspired by the moustache library. All variables can be rendered into view by putting the key of the object between `{{` and `}}`. This does also work for nested object. **Be aware that all variables must be prefixed with `data.`**\n\n```js\nvar obj = {\n  name: {\n    first: 'Boba',\n    last: 'Fett'\n  }\n};\n'{{data.name.first}} {{data.name.last}}' --- renders ---\u003e 'Boba Fett'\n```\n\nBy default `choosebumps` has `{{data}}` as the template (Works for array of string or numbers). You can change it either by sending it in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  template: '{{data.name}}'\n});\n```\n\nor anytime later by setting `multiple` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.template = '{{data.name.last}}';\n```\n\n*`options.template` accepts a string as input and ignores all other values.*\n\n#### `options.tagtemplate` (only if `options.multiple` is true)\n\n`options.tagtemplate` can be used to set a custom template for the selected item rendering when multiple item selection is enabled.\nIt works the same way as `options.template` --\u003e see documentation further up.\n\nIf `options.tagtemplate` is not set, it will inherit the template from `options.template`.\n\n#### `options.selectedtemplate`\n\n`options.selectedtemplate` can be used to set a custom template for the selected item rendering.\nIt works the same way as `options.template` --\u003e see documentation further up.\n\nIf `options.selectedtemplate` is not set, it will inherit the template from `options.template`.\n\n#### `options.categorize`\n\nWith `options.categorize` you can categorize the items by string.\n\nIf i want to categorize by lastname with the following `options.items` set.\n```js\n  [\n    {\n      name: {\n        last: 'Doe',\n        first: 'John'\n      }\n    }\n  ]\n```\n\nYou would set `options.categorize` = `'name.last'`.\n\nYou can activate it either by sending it in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  categorize: 'name.last'\n});\n```\n\nor anytime later by setting `categorize` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.categorize = null;\n```\n\n*`options.categorize` accepts a string or null as input and ignores all other types.*\n\n#### `options.onselect` (Callback)\n\nWith `options.onselect` you can attach a callback to the select event.\n\nThe callback function will get 1 parameter with the selected item.\n\nYou can activate it either by sending it in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  onselect: function(item){\n    //Woho, item here...\n  }\n});\n```\n\nor anytime later by setting `onselect` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.onselect = null;\n```\n\n*`options.onselect` accepts a function or null as input and ignores all other types.*\n\n#### `options.onremove` (Callback)\n\nWith `options.onremove` you can attach a callback to the remove event.\n\nThe callback function will get 1 parameter with the selected item.\n\nYou can activate it either by sending it in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  onremove: function(item){\n    //Woho, item here...\n  }\n});\n```\n\nor anytime later by setting `onremove` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.onremove = null;\n```\n\n*`options.onremove` accepts a function or null as input and ignores all other types.*\n\n#### `options.onadd` (Callback)\n\nWith `options.onadd` you can attach a callback to the add event (works with search mode only).\n\nAdd gets triggered when pressing enter and no other item is selected.\n\nThe callback function will get 1 parameter with the typed text.\n\nYou can activate it either by sending it in to the options at initialization:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  onadd: function(value){\n    //Woho, value here...\n  }\n});\n```\n\nor anytime later by setting `onadd` for the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb');\n//Some lines later...\ncb.onadd = null;\n```\n\n*`options.onadd` accepts a function or null as input and ignores all other types.*\n\n#### `choosebumps.select` (Function)\n\nWith `choosebumps.select` you can programmaticaly set the selected item.\n\nThe function will take the item to be selected as parameter. **Only items that are in `options.items` can be selected! (Unless items is an url which get items dynamically)**\n\n**If the parameter is null, reset gets called!**\n\nYou can call it on the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  items: [1,2,3,4]\n});\n//Some lines later...\ncb.select(4);\n```\n\n#### `choosebumps.remove` (Function)\n\nWith `choosebumps.remove` you can programmaticaly remove a selected item.\n\nThe function will take the item to be removed from selection as parameter. **Only items that are selected can be removed!**\n\n**If the parameter is null, reset gets called!**\n\nYou can call it on the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  items: [1,2,3,4]\n});\n//Some lines later...\ncb.remove(4);\n```\n\n#### `choosebumps.reset` (Function)\n\nWith `choosebumps.reset` you can programmaticaly remove all selected items.\n\nYou can call it on the returned `choosebumps` instance:\n\n```js\nvar cb = ChooseBumps('#cb',{\n  items: [1,2,3,4]\n});\n//Some lines later...\ncb.reset();\n```\n\n\n\n---\n\n**Great shoutout to [Kent C. Dodds](https://github.com/kentcdodds) for providing great tutorials on [how to write an open source library](https://egghead.io/series/how-to-write-an-open-source-javascript-library)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrsten%2Fchoose-bumps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrsten%2Fchoose-bumps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrsten%2Fchoose-bumps/lists"}