30: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)`31: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; // }32:[] 2e:{"title":"Search Checkbox 🔎☑","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":141,"value":"selected","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"## Binding to another input (WIP)","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"Inputs.bind(Inputs.checkbox(data), viewof selected )","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":145,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"searchCheckbox = require('@john-guerra/search-checkbox@1.0.0/dist/SearchCheckbox.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":223,"value":"function termFilter(term) {\n return new RegExp(`(?:^.*|[^\\\\p{L}-])${escapeRegExp(term)}`, \"iu\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"function escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":256,"value":"function* valuesof(d) {\n for (const key in d) {\n yield d[key];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}