29:null 2a:["$","title",null,{"children":"Dynamic Search Selector with Choices.js | Robert Lesser | Observable"}] 2f:T642,DynamicSelector = (config = {}) => { const { fn, label, type = "one", choicesConfig = {} } = typeof config == "function" ? { fn: config } : config; const defaultChoicesConfig = { renderChoiceLimit: 3, removeItemButton: true }; // create a single or multi select node const select = html``; document.body.appendChild(select); // initialise choices object with select node and config const choicesObject = new Choices(select, { ...defaultChoicesConfig, ...choicesConfig }); // listener for search typing to fire API call and populate choices select.addEventListener("search", async function (event) { choicesObject.clearChoices(); choicesObject.setChoices(await fn(event.detail.value)); // TODO: // The right way is to send setChoices() a promise so that it renders "Loading..." // But trying this line: // choicesObject.setChoices(async () => await fn(event.detail.value)); // Causes the text box to unfocus and prevents additional typing after search }); // Wrapping container to capture change events const container = html` `; container.addEventListener("change", () => container.dispatchEvent(new CustomEvent("input")) ); // On input event, set the value to the selected item(s) container.addEventListener( "input", () => (container.value = Array.from(select, (d) => d.value)) ); container.value = []; return container; }30:T2200,// https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css with a couple of tweaks html``31:[] 2d:{"id":"aef3f70e3d152172","slug":"dynamic-search-selector-with-choices-js","title":"Dynamic Search Selector with Choices.js","thumbnail":"5d1ec1c73b66e31f5a34a1a1daeeec9f3084124a2be85b1b935a5230153360da","access_level":"public","create_time":"$D2023-03-08T05:11:05.024Z","update_time":"$D2023-03-08T23:55:54.573Z","view_time":null,"first_public_time":"$D2023-03-08T23:58:15.074Z","has_unpublished_edits":null,"fork":{"id":"fb5d7cd493282809","slug":"hello-choices","title":"Hello, Choices!","owner":{"id":"1a4aa47cd703517e","login":"bayre","name":"Ben Ayre"}},"stars":3,"starred":false,"owner":{"type":"team","id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":"starter_2024"},"version":1257,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a6984a21bf6bf27","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":null}],"members":[{"type":"individual","id":"2a6984a21bf6bf27","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Dynamic Search Selector with Choices.js","cells":[{"id":0,"value":"# Dynamic Search Selector with Choices.js\n\nThe contents of the search dropdown populate dynamically as you type. This can be used for calling APIs to populate the results, like with this Wikipedia example.\n\nA fork of [\"Hello, Choices!\"](https://observablehq.com/@bayre/hello-choices) to make it work for an external API call.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1019,"value":"viewof wikipediaSearchOne = DynamicSelector({\n fn: searchWikipediaPages,\n label: \"Select a Wikipedia Page\",\n type: \"one\",\n choicesConfig: {\n searchFloor: 3,\n duplicateItemsAllowed: false,\n renderChoiceLimit: 3,\n searchPlaceholderValue: \"Search for a Wikipedia Page\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"singleResults = wikipediaSearchOne","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1244,"value":"viewof wikipediaSearchMultiple = DynamicSelector({\n fn: searchWikipediaPages,\n label: \"Select multiple Wikipedia Page\",\n type: \"multiple\",\n choicesConfig: {\n searchFloor: 3,\n duplicateItemsAllowed: false,\n renderChoiceLimit: 3,\n searchPlaceholderValue: \"Search for a Wikipedia Page\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"multipleResults = wikipediaSearchMultiple","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"TODO:\n- Get Loading state working right\n- More options?\n- Make style match native inputs more","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":960,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"viewof search = Inputs.search(cars, { label: \"111\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"viewof select = Inputs.select([\"A\", \"B\"], {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"searchWikipediaPages = async (search, limit = 10) => {\n const res = await d3.json(\n `https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=${search}&limit=${limit}`\n );\n return res[1].map((d, i) => ({ label: d, value: res[3][i] }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"Choices = require(\"choices.js@9.0.1/public/assets/scripts/choices.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"