31: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; }32:[] 2f:{"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"},{"id":339,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":582,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`## Autosuggest Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"searchResult = searchForm && (await fetchLocationData(searchForm))","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"placeholderText = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":48,"value":"baseURIBingAutosuggest = \"https://dev.virtualearth.net/REST/v1/Autosuggest\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"baseURIBingLocations = \"https://dev.virtualearth.net/REST/v1/Locations\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":42,"value":"bingMapsToken = \"AoeLs7mOCUdR3NBSxkf_ZsG1zYT2v3QH0sa8HwdMQwDxvpNjOj465LR-QrceT37F\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}