feat(input): add input with native html datalist

Author: adaptive-shield-matrix

lib/input/input/InputDatalist.tsx

@@ -0,0 +1,40 @@
+import { splitProps, type ComponentProps } from "solid-js"
+import { Input } from "~ui/input/input/Input"
+import type { HasId } from "~ui/utils/HasId"
+import type { MayHaveClassAndChildren } from "~ui/utils/MayHaveClassAndChildren"
+import { generateId12 } from "~utils/ran/generateId12"
+
+export interface ResourceListSearchProps extends ComponentProps<"input"> {
+  getOptions: () => string[]
+  optionDisplayText?: (option: string) => string
+}
+
+export function InputDatalist(p: ResourceListSearchProps) {
+  const [s, rest] = splitProps(p, ["id", "class", "type", "list"])
+  const id = p.id ?? generateId12()
+  const listId = id + "-options"
+
+  return (
+    <>
+      <Input id={id} type={s.type ?? "text"} class={p.class} list={listId} {...rest} />
+      <DataList id={listId} getOptions={p.getOptions} optionDisplayText={p.optionDisplayText} />
+    </>
+  )
+}
+
+import { Key } from "@solid-primitives/keyed"
+
+interface DataListProps extends HasId, MayHaveClassAndChildren {
+  getOptions: () => string[]
+  optionDisplayText?: (option: string) => string
+}
+
+function DataList(p: DataListProps) {
+  return (
+    <datalist id={p.id}>
+      <Key each={p.getOptions()} by={(i) => i}>
+        {(item) => <option value={item()}>{p.optionDisplayText ? p.optionDisplayText(item()) : item()}</option>}
+      </Key>
+    </datalist>
+  )
+}

src/demos/demoList.ts

@@ -61,6 +61,11 @@ const DemoCheckbox = lazy(async () => {
   return { default: c.DemoCheckbox }
 })
 
+const DemoInputDatalist = lazy(async () => {
+  const c = await import("@/demos/input/DemoInputDatalist")
+  return { default: c.DemoInputDatalist }
+})
+
 const DemoSelectMultiple = lazy(async () => {
   const c = await import("@/demos/input/DemoSelectMultiple")
   return { default: c.DemoSelectMultiple }
@@ -196,6 +201,7 @@ export const demoList = {
     DemoSelectSingleNative: DemoSelectSingleNative,
     DemoCheckMultiple: DemoCheckMultiple,
     DemoCheckbox: DemoCheckbox,
+    DemoInputDatalist: DemoInputDatalist,
     DemoSelectMultiple: DemoSelectMultiple,
   },
   interactive: {

src/demos/input/DemoInputDatalist.tsx

@@ -0,0 +1,83 @@
+import { createSignal } from "solid-js"
+import { InputDatalist } from "~ui/input/input/InputDatalist"
+import { PageWrapper } from "~ui/static/page/PageWrapper"
+
+const fruits = [
+  "apple",
+  "banana",
+  "orange",
+  "grape",
+  "strawberry",
+  "blueberry",
+  "watermelon",
+  "pineapple",
+  "mango",
+  "kiwi",
+]
+
+const fruitEmojis: Record<string, string> = {
+  apple: "🍎",
+  banana: "🍌",
+  orange: "🍊",
+  grape: "🍇",
+  strawberry: "🍓",
+  blueberry: "🫐",
+  watermelon: "🍉",
+  pineapple: "🍍",
+  mango: "🥭",
+  kiwi: "🥝",
+}
+
+export function DemoInputDatalist() {
+  return (
+    <PageWrapper>
+      <div class="space-y-8">
+        <BasicFruitsDatalist />
+        <CustomFruitEmojiDatalist />
+      </div>
+    </PageWrapper>
+  )
+}
+
+function BasicFruitsDatalist() {
+  const [basicFruitValue, setBasicFruitValue] = createSignal("")
+
+  return (
+    <div class="space-y-4">
+      <h3 class="text-lg font-semibold">Basic Fruits Datalist</h3>
+      <InputDatalist
+        getOptions={getFruitOptions}
+        placeholder="Select a fruit..."
+        value={basicFruitValue()}
+        onInput={(e) => setBasicFruitValue(e.currentTarget.value)}
+      />
+      <p class="text-sm text-muted-foreground">Selected: {basicFruitValue() || "None"}</p>
+    </div>
+  )
+}
+
+function CustomFruitEmojiDatalist() {
+  const [customFruitValue, setCustomFruitValue] = createSignal("")
+
+  return (
+    <div class="space-y-4">
+      <h3 class="text-lg font-semibold">Custom Display with Emojis</h3>
+      <InputDatalist
+        getOptions={getFruitOptions}
+        optionDisplayText={getFruitWithEmoji}
+        placeholder="Select a fruit with emoji..."
+        value={customFruitValue()}
+        onInput={(e) => setCustomFruitValue(e.currentTarget.value)}
+      />
+      <p class="text-sm text-muted-foreground">Selected: {customFruitValue() || "None"}</p>
+    </div>
+  )
+}
+
+function getFruitOptions(): string[] {
+  return fruits
+}
+
+function getFruitWithEmoji(fruit: string): string {
+  return `${fruitEmojis[fruit] || "🍓"} ${fruit}`
+}