2c:null 2d:["$","title",null,{"children":"Search Checkbox 🔎☑ | ivan velasco | Observable"}] 32:T4b7,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 * @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)`33:Td67,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 optionsSearch: { filter: fullSearchFilter // searches in the whole word }, height: 300, ...options }; // To remove the label from the options for the checkboxes function cloneIgnoring(obj, attrToIgnore) { const { [attrToIgnore]: _, ...rest } = obj; return rest; } 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() { debugger; checkboxes.value = selectedToArray(); output.innerHTML = `(${countSelected()} of ${data.length} selected)`; component.dispatchEvent(new Event("input", { bubbles: true })); } btnAll.addEventListener("click", () => { changeSome(search.value, true); updateValueFromSelected(); }); btnNone.addEventListener("click", () => { changeSome(search.value, false); console.log("None", selectedToArray()); updateValueFromSelected(); }); component.value = selectedToArray(); search.addEventListener("input", (evt) => { evt.stopPropagation(); // 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-block"; } 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; }34:[] 30:{"id":"3f9890da3bb419bf","slug":"search-checkbox","title":"Search Checkbox 🔎☑","thumbnail":"0921401b7121f7fd5f8fd8974532de8b43e14d065f22a86d1a44cfebd49774fb","access_level":"public","create_time":"$D2023-05-23T17:20:06.499Z","update_time":"$D2023-05-23T18:12:50.868Z","view_time":null,"first_public_time":"$D2023-05-23T17:20:06.499Z","has_unpublished_edits":null,"fork":{"id":"600f1f80e771a771","slug":"search-checkbox","title":"Search Checkbox 🔎☑","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"930819e3d82545cf","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":"starter_2024","bio":""},"version":465,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"bio":""}],"members":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Search Checkbox 🔎☑","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"\nfunction escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"