29:null 2a:["$","title",null,{"children":"Interactive list with autocomplete | Lino Galiana | Observable"}] 2f:[] 2d:{"id":"139d3a9c5674a5b8","slug":"interactive-list-with-autocomplete","title":"Interactive list with autocomplete","thumbnail":"d900317499b87ac0777569cf949ef89a17bf543868717f5ed615308031ca3545","access_level":"public","create_time":"$D2023-03-15T13:54:28.722Z","update_time":"$D2023-08-07T11:04:30.402Z","view_time":null,"first_public_time":"$D2023-03-15T13:54:28.722Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c861da44f1c38139","login":"linogaliana","name":"Lino Galiana","avatar_url":"https://avatars-next.observableusercontent.com/a68859cd8680b94e9f566939a8aaff21178c54a6221567a94798ca456c6a82d7","tier":"starter_2024"},"version":290,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b03130f8204b0f4b","login":"linogaliana","name":"Lino Galiana","avatar_url":"https://avatars-next.observableusercontent.com/a68859cd8680b94e9f566939a8aaff21178c54a6221567a94798ca456c6a82d7","tier":null}],"members":[{"type":"individual","id":"b03130f8204b0f4b","login":"linogaliana","name":"Lino Galiana","avatar_url":"https://avatars-next.observableusercontent.com/a68859cd8680b94e9f566939a8aaff21178c54a6221567a94798ca456c6a82d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive list with autocomplete","cells":[{"id":0,"value":"# Interactive list with autocomplete","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"//grid_two_dataframes = await html`

\n//

${viewof nom_commune}

\n//

${update}

\n//

${list_selected}

\n//

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof nom_commune = Inputs.text({\n label: \"Choix de la commune\",\n placeholder: \"Entrer le nom d'une commune\",\n datalist: codes_communes.map(d => d.LIBELLE),\n submit: true\n //value: \"Toulouse\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"//borrowed from https://observablehq.com/@danyx/lists-of-items-with-add-delete-buttons#\n\n// Here we show a message that the list is empty or otherwise\n// return a ul tag with one nested li tag for each item\n// Each item gets an a tag with an onclick handler that\n// triggers setting items to a copy of items with the item at its index\n// filtered out.\nlist_selected = { if (items.length === 0) {\n return html`

There are no items in the list

`\n }\n else {\n return html`

\n \n (mutable items = items.filter(\n (item, filterindex) => filterindex != index\n ))}>\n ${gain} 🗑\n \n

\n`\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"{\n mutable items = unique([...mutable items, nom_commune])\n return items\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"// The button has an onclick handler that mutates the target. Since\n// in this case the target is an array we make a copy, add the current newItemInput \n// value and set the items array to the new value\nupdate = {\n const button = html``;\n button.onclick = () => {\n let newItems = [...mutable items, nom_commune];\n mutable items = unique(newItems);\n };\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"// The mutable items array. This is what you would use for further calculations\nmutable items = [\"\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"//viewof liste_villes_select = Inputs.checkbox(\n// x.filter(d => d != \"\"), {label: \"Villes sélectionnées\"}\n//)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"function removeElement(arr, value) {\n const index = arr.indexOf(value);\n if (index !== -1) {\n arr.splice(index, 1);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"function unique(data, accessor) {\n return Array.from(new Set(accessor ? data.map(accessor) : data));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"x = unique(\n push_mutable(d)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"d = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function push_mutable(d){\n d.push(nom_commune);\n return d ;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"codes_communes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"codes_communes = await db.query(`SELECT COM, LIBELLE from cog`) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Inputs.table(\n db.query(`SELECT * FROM cog`)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"url_cog = \"s3://projet-cartiflette/diffusion/shapefiles-test1/year=2022/administrative_level=COMMUNE/crs=None/france_entiere=raw/vectorfile_format=parquet/provider=INSEE/source=COG/raw.parquet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"configuredClient = {\n const client = await DuckDBClient.of();\n await client.sql`\n SET s3_endpoint='minio.lab.sspcloud.fr'\n `;\n return client;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"db = {\n await configuredClient.query(`\n CREATE VIEW cog AS \n SELECT * FROM read_parquet('${url_cog}') ;\n `);\n return configuredClient\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"import {html} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"