Search spellcheck

tomlarkworthy · Jan 28, 2021 · 6301056 · 6301056
1 parent 0a12284
commit 6301056
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/src/search.js b/src/search.js
@@ -2,22 +2,23 @@ import {html} from "htl";
 import {arrayify} from "./array.js";
 import {preventDefault} from "./event.js";
 import {formatNumber, stringify} from "./format.js";
-import {boxSizing, defaultStyle, mr1, mr2} from "./style.js";
+import {boxSizing, defaultStyle, mr1, mr2, textStyle} from "./style.js";
 
 export function Search(data, {
   format = value => formatNumber(value.length), // length format
   label = "results",
   value = "", // initial search query
   placeholder = "Search", // placeholder text to show when empty
   columns = data.columns,
+  spellcheck,
   filter = columns === undefined ? searchFilter : columnFilter(columns), // returns the filter function given query
   style = {}
 } = {}) {
   data = arrayify(data);
   label = html`<span>${label}`;
   const {width = "180px", ...formStyle} = style;
   const form = html`<form style=${{...defaultStyle, ...formStyle}} onsubmit=${preventDefault}>
-    <input name=input type=search style=${{...mr2, ...boxSizing, width}} placeholder=${placeholder} value=${value} oninput=${oninput}><output name=output style=${mr1}></output>${label}
+    <input name=input type=search spellcheck=${spellcheck === undefined ? false : spellcheck + ""} style=${{...mr2, ...textStyle, ...boxSizing, width}} placeholder=${placeholder} value=${value} oninput=${oninput}><output name=output style=${mr1}></output>${label}
   </form>`;
   const {input, output} = form.elements;
   function oninput() {

diff --git a/test/inputs/index.js b/test/inputs/index.js
@@ -14,6 +14,7 @@ export {
   searchLabelHtml,
   searchLabelValue,
   searchPlaceholder,
+  searchSpellcheck,
   searchStyle,
   searchValue,
   searchWide

diff --git a/test/inputs/searches.js b/test/inputs/searches.js
@@ -21,6 +21,10 @@ export async function searchPlaceholder() {
   return Search(["red", "green", "blue"], {placeholder: "dollars&pounds"});
 }
 
+export async function searchSpellcheck() {
+  return Search(["red", "green", "blue"], {spellcheck: false});
+}
+
 export async function searchStyle() {
   return Search(["red", "green", "blue"], {style: {background: "red"}});
 }

diff --git a/test/output/searchSpellcheck.html b/test/output/searchSpellcheck.html
@@ -0,0 +1,3 @@
+<form style="display: flex; align-items: center; min-height: 33px; font: var(--sans-serif) 13px 13px;">
+  <input name="input" type="search" spellcheck="false" placeholder="Search" value="" style="margin-right: 0.5em; box-sizing: border-box; width: 180px;"><output name="output" style="margin-right: 0.25em;"></output><span style="display: none;">results</span>
+</form>