multiAutoSelect test

31:T579, ## Usage outside of observable ~~~html multiAutoSelect test

~~~ Thanks @kasiviswanath for these enhancements: - Added draggable feature to re-order the selected element ### Changelog * @468 11/11/2024 Rewritten as a npm module. Removed postRender option * @440 08/06/2024 Published as an NPM module * @260 04/05/2024 Added support for multiAutoSelect(data, {options}) format * @248 04/06/2023 Added Kasi's improvements ## Example:32:[] 2f:{"title":"Multi Auto Select","cells":[{"id":0,"value":"# Multi Auto Select\n\nA selector of multiple items with an autocomplete search box. See also my [search-checkbox](https://observablehq.com/@john-guerra/search-checkbox)\n\n~~~js\nMultiAutoSelect = require(\"multi-auto-select\")\n\nviewof options = MultiAutoSelect([\"a\", \"b\", \"c\"], {\n label: \"Select some options\",\n value: [\"a\"],\n});\n~~~\n","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"viewof mas = multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\",\n value: [\"California\", \"Washington\", \"Alabama\"],\n label: \"State\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"mas","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"viewof a = Inputs.bind(multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\",\n value: [\"California\", \"Washington\", \"Alabama\"],\n label: \"State\"\n}), viewof mas )","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"states = usa.objects.states.geometries.map((d) => d.properties.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"## Passing objects\n\nYou can also pass objects with an attached accessor using `attr`","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"viewof eg2 = multiAutoSelect({ options: objects, attr: (d) => d.name , debug:true})","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"eg2","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"## Testing with numbers","pinned":true,"hidden":false,"mode":"md"},{"id":130,"value":"multiAutoSelect({ options: d3.range(20).slice(1, 20) })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { input, usa } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"Sortable = require(\"sortablejs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"## (WIP) With a persistent url","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"viewof persisted = PersistInput(\"states\", multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\",\n value: [],\n label: \"State\"\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"Inputs.bind(Inputs.checkbox(states), viewof persisted)","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"persisted","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"## Loading the library","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"MultiAutoSelect = {\n try {\n console.log(\"Trying to load module local\");\n return await require(`http://localhost:8080/dist/multiAutoSelect.js?${Date.now()}`);\n } catch (e) {\n console.log(\"Failed. Trying to load module from NPM\");\n return await require(\"multi-auto-select@0.0.10\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"multiAutoSelect = MultiAutoSelect","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"import {PersistInput} from '@john-guerra/persist-input'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}