44:["$","title",null,{"children":"Multi Auto Select | jrogerthat | Observable"}] 4c:T5eb,// Function that takes options and return function for inner element rendering function postRender({ options = ["♂️", "♀️", "⚧️"] } = {}) { return (d, button, ele, fm) => { // Initialize the sort order if (!fm.order) { fm.order = []; } //Get order when there is a change in order or selection function getOrder() { fm.order = []; console.log("node count", fm[1].childNodes); for (let child of fm[1].childNodes) { fm.order.push(child.childNodes[1]?.nodeValue); } } // Update the order if the elements are re-ordered fm.output.addEventListener("update", () => getOrder()); ele.addEventListener("click", () => { // Initialize the nested option only when the length is 2 if (ele.childNodes.length === 2) { //Get random option let randoption = options[Math.floor(Math.random() * options.length)]; //Insert before the delete button ele.insertBefore(html`${randoption}`, button); fm.order.push(randoption); fm.dispatchEvent(new Event("input", { bubbles: true })); return; } // Get the new option let newoption = (options.indexOf(ele.childNodes[1]?.nodeValue) + 1) % options.length; ele.removeChild(ele.childNodes[1]); ele.insertBefore(html`${options[newoption]}`, button); fm.dispatchEvent(new Event("input", { bubbles: true })); getOrder(); }); // For the 1st time initialization ele.click(); }; }4d:T13f5,function multiAutoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, label = "", list = DOM.uid("autoSelect").id, attr = (d) => d, // an accessor on what attribute of the object to use postRender = (d) => d // A function called after each element has been rendered, receives: // d: datum // button: the button used for deleting // ele: the html element // fm: the overall widget, useful for changing the return value of the widget using fm.value } = Array.isArray(config) ? { options: config } : config; const optionsMap = new Map(options.map((o) => ["" + attr(o), o])); // We need the map with strings //BEGIN ON ACTION const onAction = (fm) => { const addToSelected = (d) => { if ( optionsMap.has(fm.input.value) && // It is an option fm.value.map((d) => "" + d).indexOf(fm.input.value) === -1 // If it hasn't been selected. Need to convert to strings to do the comparison for numbers ) { fm.value.push(optionsMap.get(fm.input.value)); renderSelection(); fm.input.value = ""; fm.dispatchEvent(new Event("input", { bubbles: true })); } }; /* RENDERS THE INDIVIDUAL BADGES */ const renderSelected = (d) => { const button = html``; const ele = html`${attr( d )} ${button}`; button.addEventListener("click", (e) => { fm.value.splice(fm.value.indexOf(d), 1); // remove the element directly ele.remove(); fm.dispatchEvent(new Event("input", { bubbles: true })); fm.input.focus(); }); // Highlight the dragging element position ele.addEventListener("dragover", (e) => { ele.style["border-color"] = "orange"; }); // Update back to default color ele.addEventListener("dragleave", (e) => { ele.style["border-color"] = "#ccc"; }); // Update back to default color ele.addEventListener("dragend", (e) => { ele.style["border-color"] = "#ccc"; }); return ele; }; function renderSelection() { for (let o of fm.value) { //Check if the element is already selected if ( ![...fm.output.childNodes] .map((d) => { // + for integer let data = d.firstChild?.data?.trim(); return isNaN(+data) ? data : +data; }) .includes(attr(o)) ) { fm.output.appendChild(renderSelected(o)); } } Sortable.create(fm.output); //Update event will be triggered when the user drag the selected components Sortable.utils.on(fm.output, "update", () => { console.log("utils on output", fm); fm.value = [...fm.output.childNodes].map((a) => a.childNodes[0].nodeValue.trim() ); fm.dispatchEvent(new Event("input", { bubbles: true })); }); } const changeValue = (data) => { d3.select(fm.output).selectAll("span").remove(); fm.value = data; // fm.dispatchEvent(new Event("input", { bubbles: false })); renderSelection(); }; // Call nested selection to re-render inner elements // postRender(d, button, ele, fm); fm.changeValue = changeValue; fm.input.value = ""; fm.value = value ? Array.isArray(value) ? value.filter((d) => optionsMap.has(d)) : [value] : []; fm.onsubmit = (e) => { e.preventDefault(); console.log("onSubmit", e); addToSelected(); }; fm.input.addEventListener("input", function (e) { e.stopPropagation(); console.log("input", e); // Avoid adding the selection when still writing. Happens with numbers 🤷🏼‍♂️ if ( e.inputType === "insertReplacementText" || e.inputType === undefined // triggered when selecting from the datalist ) { addToSelected(); } }); renderSelection(); }; ////END OF ON ACTION const form = input({ type: "text", title, description, attributes: { disabled }, action: onAction, options: options, form: html` ` }); form.output.style["margin-left"] = "0px"; form.style["min-height"] = "2.5em"; form.options = options; return form; }4e:[] 48:{"id":"bed4e0059523b6d1","slug":"multi-auto-select","title":"Multi Auto Select","thumbnail":"75383d7b7953a2adf81254f5fa6ccefbc7f1fe3960d60291e8abef419bc04f82","access_level":"public","create_time":"$D2023-11-14T00:10:16.623Z","update_time":"$D2023-11-20T20:31:08.758Z","view_time":null,"first_public_time":"$D2023-11-14T00:10:16.623Z","has_unpublished_edits":null,"fork":{"id":"9ac406907b45efa2","slug":"multi-auto-select","title":"Multi Auto Select","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d18f470d87fc3b35","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":390,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71d74430949eb42d","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"71d74430949eb42d","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Multi Auto Select","cells":[{"id":0,"value":"md`# Multi Auto Select\n\nA selector of multiple items with an autocomplete search box. Based on [@jahkenas/inputs](/@jashkenas/inputs), also submitted as a suggestion there. See also my [search-checkbox](https://observablehq.com/@john-guerra/search-checkbox)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"And this is a custom function that controls the displaying and changing of order","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## Passing objects\n\nYou can also pass objects with an attached accessor using `attr`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { input, usa } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"Sortable = require(\"sortablejs\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// eg2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// if you can get a viewof eg2 = multiAutoSelect({ options: objects, attr: (d) => d.name })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// objects = [\n// { id: 1, name: \"John\" },\n// { id: 2, name: \"Alexis\" },\n// { id: 3, name: \"Guerra\" },\n// { id: 4, name: \"Gomez\" }\n// ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"// multiAutoSelect({ options: d3.range(20).slice(1, 20) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null