feat(filtering, autocomplete functionality , along with selecting an object): autocomplete works

We added filtering, user can select an option, and it reflects that in the input

Author: thejackshelton

packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from 'storybook-framework-qwik';
 import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { Test } from './autocomplete';
 
 /*
 
@@ -10,6 +9,88 @@ import { Test } from './autocomplete';
 
 */
 
+const fruits = [
+  'Apple',
+  'Apricot',
+  'Avocado 🥑',
+  'Banana',
+  'Bilberry',
+  'Blackberry',
+  'Blackcurrant',
+  'Blueberry',
+  'Boysenberry',
+  'Currant',
+  'Cherry',
+  'Coconut',
+  'Cranberry',
+  'Cucumber',
+  'Custard apple',
+  'Damson',
+  'Date',
+  'Dragonfruit',
+  'Durian',
+  'Elderberry',
+  'Feijoa',
+  'Fig',
+  'Gooseberry',
+  'Grape',
+  'Raisin',
+  'Grapefruit',
+  'Guava',
+  'Honeyberry',
+  'Huckleberry',
+  'Jabuticaba',
+  'Jackfruit',
+  'Jambul',
+  'Juniper berry',
+  'Kiwifruit',
+  'Kumquat',
+  'Lemon',
+  'Lime',
+  'Loquat',
+  'Longan',
+  'Lychee',
+  'Mango',
+  'Mangosteen',
+  'Marionberry',
+  'Melon',
+  'Cantaloupe',
+  'Honeydew',
+  'Watermelon',
+  'Miracle fruit',
+  'Mulberry',
+  'Nectarine',
+  'Nance',
+  'Olive',
+  'Orange',
+  'Clementine',
+  'Mandarine',
+  'Tangerine',
+  'Papaya',
+  'Passionfruit',
+  'Peach',
+  'Pear',
+  'Persimmon',
+  'Plantain',
+  'Plum',
+  'Pineapple',
+  'Pomegranate',
+  'Pomelo',
+  'Quince',
+  'Raspberry',
+  'Salmonberry',
+  'Rambutan',
+  'Redcurrant',
+  'Salak',
+  'Satsuma',
+  'Soursop',
+  'Star fruit',
+  'Strawberry',
+  'Tamarillo',
+  'Tamarind',
+  'Yuzu',
+];
+
 import {
   AutocompleteRoot,
   AutocompleteLabel,
@@ -34,7 +115,7 @@ const RegularAutocomplete = () => (
     <AutocompleteRoot>
       <AutocompleteTrigger>
         <AutocompleteInput />
-        <AutocompleteButton class="test" onClick$={() => console.log('hi')}>
+        <AutocompleteButton>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -50,9 +131,11 @@ const RegularAutocomplete = () => (
         </AutocompleteButton>
       </AutocompleteTrigger>
       <AutocompleteListbox>
-        <AutocompleteOption>Option 1</AutocompleteOption>
-        <AutocompleteOption>Option 2</AutocompleteOption>
-        <AutocompleteOption>Option 3</AutocompleteOption>
+        {fruits.map((fruit, index) => (
+          <AutocompleteOption optionValue={fruit} key={index}>
+            {fruit}
+          </AutocompleteOption>
+        ))}
       </AutocompleteListbox>
     </AutocompleteRoot>
   </>

packages/kit-headless/src/components/Autocomplete/autocomplete.tsx

@@ -5,13 +5,15 @@ import {
   useContextProvider,
   createContextId,
   useSignal,
-  Signal,
+  type Signal,
   QwikIntrinsicElements,
   useStore,
   useVisibleTask$,
+  useTask$,
   $,
   useStylesScoped$,
 } from '@builder.io/qwik';
+import { routeAction$ } from '@builder.io/qwik-city';
 
 import { computePosition, flip } from '@floating-ui/dom';
 
@@ -103,6 +105,18 @@ import { computePosition, flip } from '@floating-ui/dom';
     Compute position & our triggerRef is what determines what is anchored with floating UI.
     https://floating-ui.com/docs/computePosition
 
+
+    Autocomplete implementation:
+    - grab reference to input box and listbox
+    - search function that has an array of results, returns results
+    - searchHandler function
+      - sets input signal as whatever is in the text box
+      - sets results to empty array
+      - if input is not empty set results equal to the search function with our input signal value as param
+      - showSuggestions function with results and our input signal value as params
+    - 
+      
+
 */
 
 // Taken similar props from select + input Value
@@ -230,8 +244,45 @@ export type InputProps = QwikIntrinsicElements['input'];
 
 // Add required context here
 export const AutocompleteInput = component$((props: InputProps) => {
+  const ref = useSignal<HTMLElement>();
+  const contextService = useContext(AutocompleteContextId);
   // required prop here
-  return <input id="autocomplete-test" role="combobox" {...props} />;
+
+  useVisibleTask$(({ track }) => {
+    track(() => contextService.inputValue.value);
+
+    if (
+      contextService.inputValue.value.length > 0 &&
+      document.activeElement === ref.value
+    ) {
+      contextService.isExpanded.value = true;
+    }
+
+    // Probably better to refactor Signal type later
+    contextService.options.map((option: Signal) => {
+      if (
+        !option.value
+          ?.getAttribute('optionValue')
+          ?.match(contextService.inputValue.value)
+      ) {
+        option.value.style.display = 'none';
+      } else {
+        option.value.style.display = '';
+      }
+    });
+
+    console.log(contextService.inputValue.value);
+  });
+
+  return (
+    <input
+      ref={ref}
+      id="autocomplete-test"
+      role="combobox"
+      bind:value={contextService.inputValue}
+      {...props}
+    />
+  );
 });
 
 export type ButtonProps = QwikIntrinsicElements['button'];
@@ -281,6 +332,7 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
   contextService.listBoxRef = ref;
+
   return (
     <ul
       ref={ref}
@@ -297,11 +349,23 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
   );
 });
 
-export type OptionProps = QwikIntrinsicElements['li'];
+export type OptionProps = { optionValue: string } & QwikIntrinsicElements['li'];
 
 export const AutocompleteOption = component$((props: OptionProps) => {
+  const ref = useSignal<HTMLElement>();
+  const contextService = useContext(AutocompleteContextId);
+  contextService.options = [...contextService.options, ref];
+
   return (
-    <li role="option" {...props}>
+    <li
+      ref={ref}
+      role="option"
+      onClick$={() => {
+        contextService.inputValue.value = props.optionValue;
+        contextService.isExpanded.value = false;
+      }}
+      {...props}
+    >
       <Slot />
     </li>
   );