28:null 29:["$","title",null,{"children":"Autocomplete Search | Chris Henrick | Observable"}] 2e:T5ae,viewof searchForm = { // see https://observablehq.com/@observablehq/introduction-to-views const form = html`

Search for a city, zipcode, county, state, or country
`; const datalist = form.querySelector("datalist"); const input = form.autocompleteText; form.value = placeholderText; form.onsubmit = (event) => event.preventDefault(); input.onchange = (event) => { const value = event.target.value; form.value = value; input.blur(); form.dispatchEvent(new CustomEvent("input")); }; input.oninput = async (event) => { const value = event.target.value; if (!value) return; const results = await fetchAutoSuggest(value); results.forEach((result) => { // prevent duplicates from being added to the autosuggest list if ( !Array.from(datalist.children).find( (node) => node.innerText === result.formattedAddress ) ) { datalist.appendChild(html``); } }); }; return form; }2f:[] 2c:{"id":"aa8ac26b05ce964b","slug":"autocomplete-search","title":"Autocomplete Search","thumbnail":"c6023891f6d55ca347c94c79c0821928e033da431b3646b9109b43557901a140","access_level":"public","create_time":"$D2020-07-15T20:36:49.355Z","update_time":"$D2024-12-05T00:02:35.268Z","view_time":null,"first_public_time":"$D2020-07-15T20:51:24.093Z","has_unpublished_edits":null,"fork":true,"stars":11,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":623,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"81d9c151229317f2","slug":"random","title":"random","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"Autocomplete Search","cells":[{"id":0,"value":"md`# Autocomplete Search\n\nThis is a demo of using the [HTML \\`\\` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) in combination with [viewof](https://observablehq.com/@observablehq/introduction-to-views) and a couple RESTful APIs to create a dynamic autocomplete text input.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"map = {\n const container = html`

`;\n yield container;\n\n const map = L.map(container, { scrollWheelZoom: false });\n\n if (searchResult && typeof searchResult === \"object\") {\n const [lowerLat, lowerLon, upperLat, upperLon] = searchResult.bbox;\n const bounds = L.latLngBounds([lowerLat, lowerLon], [upperLat, upperLon]);\n\n map.fitBounds(bounds);\n\n L.popup()\n .setLatLng(bounds.getCenter())\n .setContent(`

${searchResult.name}

`)\n .openOn(map);\n } else {\n map.setView([10, 0], 2);\n }\n\n L.tileLayer(\n \"https://a.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}@2x.png\",\n {\n attribution:\n \"CARTO | © OpenStreetMap contributors\"\n }\n ).addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`## Autosuggest Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"searchResult = searchForm && (await fetchLocationData(searchForm))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"placeholderText = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"async function fetchAutoSuggest(location) {\n const res = await fetch(\n `${baseURIBingAutosuggest}?query=${location}&key=${bingMapsToken}`\n );\n const json = await res.json();\n\n if (!json.statusCode === 200)\n return \"problem with fetching autosuggest values\";\n\n if (\n json.resourceSets &&\n json.resourceSets[0].resources &&\n json.resourceSets[0].resources[0] &&\n json.resourceSets[0].resources[0].value\n ) {\n return json.resourceSets[0].resources[0].value\n .filter((value) => value.__type === \"Place\")\n .map((result) => result.address);\n }\n\n return [];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"async function fetchLocationData(location) {\n const res = await fetch(\n `${baseURIBingLocations}/${location.trim()}?key=${bingMapsToken}`\n );\n const json = await res.json();\n\n if (json.statusCode !== 200) return \"problem fetching location data\";\n\n return json?.resourceSets[0]?.resources[0] || \"no results\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"baseURIBingAutosuggest = \"https://dev.virtualearth.net/REST/v1/Autosuggest\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"baseURIBingLocations = \"https://dev.virtualearth.net/REST/v1/Locations\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`**Note: please grab your own [Bing Maps API Key](https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key) if you fork this notebook.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"bingMapsToken = \"AoeLs7mOCUdR3NBSxkf_ZsG1zYT2v3QH0sa8HwdMQwDxvpNjOj465LR-QrceT37F\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"