2b:["$","title",null,{"children":"Text search input with autocomplete and debounce | Robert Lesser | Observable"}] 30:T453,## Configuration * `suggestion`: a function providing data for live suggestions (i.e., ``). This function should accept an input text and returns an array of suggestions (default: `() => []`) * `placeholder`: the default text you want to use as a placeholder (default: `""`) * `label`: the label describing your input (default: `""`) * `showLoading`: whether to show the "Loading..." text when results are being fetched (default: `true`) * `showResultCount`: whether to show the "N Results" text when results have been fetched (default: `true`) * `format`: the accessor function (default: `(d) => d`) * `namespace`: the identifier of the SearchForm, use it if you plan to use more SearchForm(s) in the same notebook (default: `""`) * `debounce`: whether to enable debouncing (default: `true`) * `debounceTime`: How much time (ms) to wait after the last user input before hitting the search function (default: `250`) * `debounceOptions`: Other options to change the behavior of debounce. See the [lodash docs](https://lodash.com/docs/4.17.15#debounce) for more details (default: `{}`)31:Tb52,function SearchForm({ uid = DOM.uid("autosuggestion").id, placeholder = "", label = "", showLoading = true, showResultCount = true, format = (d) => d, dataListFormat = null, suggestion = () => [], debounce = false, debounceTime = 250, debounceOptions = {} } = {}) { const input = htl.html``; const form = htl.html``; let results = []; form.value = ""; // starting value form.onsubmit = (event) => event.preventDefault(); form.onchange = (event) => { clearStatus(); const value = event.target.value; form.value = results.find((d) => format(d) == value) || ""; input.blur(); // removes keyboard focus from the element upon submission form.dispatchEvent(new CustomEvent("input", { bubbles: true })); // bubbles needed for Inputs.form }; // "cache" const options = new Map(); options.set("", []); const clearStatus = () => { d3.select(`#${uid}-status`).text(""); }; const setLoadingStatus = () => { d3.select(`#${uid}-status`).text("Loading..."); }; const setResultStatus = (resultCount) => { d3.select(`#${uid}-status`).text(`${resultCount} results`); }; const updateDatalist = (r) => { showResultCount ? setResultStatus(r.length) : clearStatus(); results = r; d3.select(`#${uid}`) .selectAll("option") .data(r) .join("option") .attr("value", format); }; const searchAndUpdate = async (text) => { if (showLoading) setLoadingStatus(); options.set(text, await suggestion(text)); // if it takes a while for the suggestion to come back, the typed text // might no longer be the same. In this case we want to cache the results // but not update the datalist, which would overwrite more recent searches if (text != input.value) { return; } updateDatalist(options.get(text)); }; const searchBouncer = _.debounce( (value) => searchAndUpdate(value), debounceTime, debounceOptions ); const handleInput = async (event) => { if (event.inputType === undefined) { // Prevents additional searching on enter press return; } event.stopPropagation(); let value = event.target.value; if (options.has(value)) { searchBouncer.cancel(); // Prevents overwriting of cache results updateDatalist(options.get(value)); if (value == "") clearStatus(); } else if (debounce) { searchBouncer(value); } else { searchAndUpdate(value); } }; input.oninput = handleInput; return form; }32:[] 2e:{"id":"ab64474437b01541","slug":"search-input-autocomplete-debounce","title":"Text search input with autocomplete and debounce","thumbnail":"b811d50943d152ee6692a3602087263eef64312d8ec77f5bd396c9439d32e17c","access_level":"unlisted","create_time":"$D2023-03-08T23:59:20.528Z","update_time":"$D2023-03-13T19:31:59.478Z","view_time":null,"first_public_time":"$D2023-03-11T00:00:06.897Z","has_unpublished_edits":null,"fork":{"id":"0fe733e26f45df35","slug":"input-autocomplete","title":"Text search input with autocomplete","owner":{"id":"88f99d18d1aef515","login":"floatingpurr","name":"Andrea Mignone"}},"stars":4,"starred":false,"owner":{"type":"team","id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":"starter_2024"},"version":1369,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Text search input with autocomplete and debounce","cells":[{"id":0,"value":"# Text search input with autocomplete and debounce\n\n🍴_Forked from [Andrea Mignone's notebook](https://observablehq.com/@floatingpurr/input-autocomplete) to add debouncing and styling_🍴\n\nA reusable autocomplete search that can be used in a real-time fashion (e.g., querying an API). It exploits [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist), the HTML Data List element. \n\nDebouncing allows you to limit the number of searches/api hits, as the suggestion function will only fire once the user has stopped typing (for 250ms by default). Uses [`_.debounce`](https://lodash.com/docs/4.17.15#debounce), which is natively bundled with Observable.\n\nLastly, this version tries to match the style and structure of the [Observable Inputs Search](https://observablehq.com/@observablehq/input-search).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"## How to use it in your notebook\n\n```javascript\nimport { SearchForm } from \"@rlesser/search-input-autocomplete-debounce\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"This search form can be used with a flat array of suggestions. Let's give it a spin:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1123,"value":"viewof debounce1 = Inputs.toggle({ label: \"Debounce?\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"viewof wiki = SearchForm({\n label: \"Wikipedia Search\",\n placeholder: \"Enter page name...\",\n debounce: debounce1,\n suggestion: async (text) => {\n mutable searchCount += 1;\n const res = await d3.json(\n `https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${text}&namespace=0&limit=10&origin=*`\n );\n return res[1];\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"wiki","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"mutable searchCount = 0 // increments when api is hit, run to reset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"But it can be also useful to explore and return data from an array of objects coming from an API, e.g.:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"{\n const res = await d3.json(\n `https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=Skywalker&namespace=0&limit=10&origin=*`\n );\n return res[1].map((d, i) => ({\n entry: d,\n url: res[3][i]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"Let's see it in action:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1128,"value":"viewof debounce2 = Inputs.toggle({ label: \"Debounce?\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"viewof wikiObject = SearchForm({\n label: \"Wikipedia Search\",\n placeholder: \"Enter page name...\",\n debounce: debounce2,\n format: (d) => d.entry, // what you want to search and display\n suggestion: async (text) => {\n const res = await d3.json(\n `https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${text}&namespace=0&limit=10&origin=*`\n );\n return res[1].map((d, i) => ({\n entry: d,\n url: res[3][i]\n }));\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"wikiObject","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"## Implementation\n\nThe machinery works as follows:\n* read the value the user has just typed-in\n* if debounce is enabled, wait until the user stops typing (or a cached result is found)\n* use such a value to retrieve suggestions (i.e., an array of matching values)\n* (*suggestions are memoized*)\n* inject suggestions in the `` elements\n* finally, the user can return a value from the suggestion list\n\nBased massively on [Andrea Mignone's notebook](https://observablehq.com/@floatingpurr/input-autocomplete), which was in-turn heavily inspired by the example of [Chris Henrick](https://observablehq.com/@clhenrick/autocomplete-search) and by suggestions of [Fabian Iwand](https://talk.observablehq.com/t/dynamic-datalist/6404/2).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"import { footer } from \"@rlesser/footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"footer(\"search-input-autocomplete-debounce\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body" 2a:E{"digest":"NEXT_REDIRECT;replace;/@rlesser/search-input-autocomplete-debounce;307;"}