2e:null 2f:["$","title",null,{"children":"Search Checkbox 🔎☑ | John Alexis Guerra Gómez | Observable"}] 34:T51e,md`# Search Checkbox 🔎☑ An useful input control for when you want the user to be able to select quickly from a long list of elements. Supports: * Select elements individually * Search for specific elements * Select/Deselect all the currently filtered elements ## Changelog * @521 Aug 4, 2026 Published as NPM module * @507 Nov 18, 2024 Bugfix when using max-height and format * @459 Jan 30, 2023 Adding a height parameter * @433 Jan 30, 2023 Reorganizing all/none buttons and add count of selected elements * @357 Oct 12, 2022 Bugfix multiple input events were triggered ## Usage: ~~~js import {searchCheckbox} from "@john-guerra/search-checkbox" ~~~ It tries to follow these best practices for [Observable Inputs](https://observablehq.com/@tophtucker/custom-input-example), and it is built by simply combining a [Search and Checkbox Observable inputs](https://observablehq.com/@observablehq/inputs). The second parameter is an option object that will be passed to these two components. Compared it with my old [multiAutoSelect](https://observablehq.com/@john-guerra/multi-auto-select), the searchCheckbox shows all the options, and contains enable all/none. ## Example: Showing the attributes in the [Kaggle Fifa dataset](https://www.kaggle.com/stefanoleone992/fifa-21-complete-player-dataset)`35:Tf93,// function searchCheckbox( // data, // An array of possible selectable options // options // ) { // options = { // value: [], // optionsCheckboxes: undefined, // use this if you want to pass specific options to the checkboxes or the search, // format: (d) => d, // optionsSearch: { // format: () => "", // filter: fullSearchFilter // searches in the whole word // }, // height: 300, // debug: false, // ...options, // }; // // To remove the label from the options for the checkboxes // function cloneIgnoring(obj, attrToIgnore) { // const { [attrToIgnore]: _, ...rest } = obj; // return rest; // } // let debug = options.debug; // data = Array.from(data); // // options.value = options.value === undefined ? [] : options.value; // let checkboxes = Inputs.checkbox( // data, // options.optionsCheckboxes || cloneIgnoring(options, "label") // ); // const search = Inputs.search(data, options.optionsSearch || options); // const btnAll = html``; // const btnNone = html``; // let selected = new Map(Array.from(options.value).map((d) => [d, true])); // function countSelected() { // return Array.from(selected.entries()).filter(([k, v]) => v).length; // } // function changeSome(sel, changeTo) { // for (let o of sel) selected.set(o, changeTo); // } // function selectedFromArray(sel) { // changeSome(data, false); // changeSome(sel, true); // } // function selectedToArray() { // return Array.from(selected.entries()) // .filter(([k, v]) => v) // .map(([k, v]) => k); // } // // HTML // let output = htl.html`(${countSelected()} of ${ // data.length // } selected)`; // const component = htl.html`${ // options.label ? htl.html`${options.label}` : "" // } // ${output} //

// ${search} //

${btnAll}

${btnNone}

${checkboxes}

`; // // Update the display whenever the value changes // Object.defineProperty(component, "value", { // get() { // return selectedToArray(); // }, // set(v) { // selectedFromArray(v); // } // }); // function updateValueFromSelected() { // checkboxes.value = selectedToArray(); // if (debug) console.log("searchCheckboxes", checkboxes.value); // output.innerHTML = `(${countSelected()} of ${data.length} selected)`; // component.dispatchEvent(new Event("input", { bubbles: true })); // // inocuous change to recompute layout. Necesary when the format funtion sets max-height for example // component.style.zIndex = 1; // } // btnAll.addEventListener("click", () => { // changeSome(search.value, true); // updateValueFromSelected(); // }); // btnNone.addEventListener("click", () => { // changeSome(search.value, false); // updateValueFromSelected(); // }); // component.value = selectedToArray(); // search.addEventListener("input", (evt) => { // // Hide all the checkboxes that aren't in the searchbox result // for (let check of checkboxes.querySelectorAll("input")) { // if (search.value.includes(data[+check.value])) { // check.parentElement.style.display = "inline-flex"; // } else { // check.parentElement.style.display = "none"; // } // } // // We don't really need to update when value when searching // // component.dispatchEvent(new Event("input", { bubbles: true })); // }); // checkboxes.addEventListener("input", (evt) => { // // avoids duplicated events // evt.stopPropagation(); // selectedFromArray(checkboxes.value); // updateValueFromSelected(); // }); // return component; // }36:[] 32:{"id":"600f1f80e771a771","slug":"search-checkbox","title":"Search Checkbox 🔎☑","thumbnail":"80ec314a9d15a517ea495fab6d49430fa01dbb68c0e21bd9943c42b6481a5913","access_level":"public","create_time":"$D2021-07-06T22:40:05.533Z","update_time":"$D2026-08-05T01:02:16.239Z","view_time":null,"first_public_time":"$D2021-07-08T17:55:28.346Z","has_unpublished_edits":null,"fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":521,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[{"id":"a207ecba975a401f","reply_to_id":null,"content":"There was a bug in Observable's thumbnail settings which caused thumbnails to get stretched vertically (https://github.com/observablehq/feedback/issues/133). It seems that this notebook's thumbnail has been stretched as well, so you may want to to reupload it.","create_time":"$D2021-07-21T11:45:45.119Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"faae77691683ff81","reply_to_id":"a207ecba975a401f","content":"Thanks!","create_time":"$D2021-07-21T18:58:48.554Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"b07e4b6e4b491e5f","slug":"observable-tricks","title":"Observable Tricks","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Search Checkbox 🔎☑","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof selected = searchCheckbox(\n data, // What elements to chose from\n {// Any other options you pass here will be passed to the checkbox and search inputs\n value: data, // Start with everything selected\n label: \"Variables\",\n height: 200,\n // You can also pass specific options for the search and the checkboxes\n // optionsSearch: {\n // filter: fullSearchFilter\n // }\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"## Binding to another input (WIP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"Inputs.bind(Inputs.checkbox(data), viewof selected )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"data = [\"ID\",\"Name\",\"Age\",\"Photo\",\"Nationality\",\"Flag\",\"Overall\",\"Potential\",\"Club\",\"Club Logo\",\"Value\",\"Wage\",\"Special\",\"Preferred Foot\",\"International Reputation\",\"Weak Foot\",\"Skill Moves\",\"Work Rate\",\"Body Type\",\"Real Face\",\"Position\",\"Jersey Number\",\"Joined\",\"Loaned From\",\"Contract Valid Until\",\"Height\",\"Weight\",\"LS\",\"ST\",\"RS\",\"LW\",\"LF\",\"CF\",\"RF\",\"RW\",\"LAM\",\"CAM\",\"RAM\",\"LM\",\"LCM\",\"CM\",\"RCM\",\"RM\",\"LWB\",\"LDM\",\"CDM\",\"RDM\",\"RWB\",\"LB\",\"LCB\",\"CB\",\"RCB\",\"RB\",\"Crossing\",\"Finishing\",\"HeadingAccuracy\",\"ShortPassing\",\"Volleys\",\"Dribbling\",\"Curve\",\"FKAccuracy\",\"LongPassing\",\"BallControl\",\"Acceleration\",\"SprintSpeed\",\"Agility\",\"Reactions\",\"Balance\",\"ShotPower\",\"Jumping\",\"Stamina\",\"Strength\",\"LongShots\",\"Aggression\",\"Interceptions\",\"Positioning\",\"Vision\",\"Penalties\",\"Composure\",\"Marking\",\"StandingTackle\",\"SlidingTackle\",\"GKDiving\",\"GKHandling\",\"GKKicking\",\"GKPositioning\",\"GKReflexes\",\"Release Clause\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"useVanillaJS = md`## Use it in vanilla JS\n\nTechnically you can use it outside of observable in vanilla JS. \n\n~~~html\n

\nYou selected: \n\n\n~~~\n\nHere a [codepen example](https://codepen.io/duto_guerra/pen/gOWMxmM)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"searchCheckbox = require('@john-guerra/search-checkbox@1.0.0/dist/SearchCheckbox.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"## Extra\n\nThis passes a different searchFilter that checks for occurrences in the whole text, not just the beginning. I sent a [PR for this](https://github.com/observablehq/inputs/pull/226)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"function termFilter(term) {\n return new RegExp(`(?:^.*|[^\\\\p{L}-])${escapeRegExp(term)}`, \"iu\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"function escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"// https://github.com/observablehq/inputs/blob/main/src/search.js\nfunction fullSearchFilter(query) {\n const filters = `${query}`\n .split(/\\s+/g)\n .filter((t) => t)\n .map(termFilter);\n return (d) => {\n if (d == null) return false;\n if (typeof d === \"object\") {\n out: for (const filter of filters) {\n for (const value of valuesof(d)) {\n if (filter.test(value)) {\n continue out;\n }\n }\n return false;\n }\n } else {\n for (const filter of filters) {\n if (!filter.test(d)) {\n return false;\n }\n }\n }\n return true;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"function* valuesof(d) {\n for (const key in d) {\n yield d[key];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"