feat(PrimeAutoComplete): Add options support with sample #61

Author: sfxcode

dev/pages/inputs/AutoComplete.vue

@@ -7,6 +7,11 @@ function search(query: string) {
   return [...list.filter(i => i.toLowerCase().includes(query.toLowerCase())), query]
 }
 
+const userList = [
+  { id: '1', name: 'Tom', value: '123' },
+  { id: '2', name: 'Tim', value: '124' },
+]
+
 const schema
   = [
     {
@@ -17,6 +22,15 @@ const schema
       dropdown: true,
       label: 'Basic AutoComplete - Use [h]ello',
     },
+    {
+      $formkit: 'primeAutoComplete',
+      id: 'basic',
+      name: 'id',
+      dropdown: true,
+      label: 'Object AutoComplete - Use [t]om',
+      options: userList,
+      optionLabel: 'name',
+    },
     {
       $formkit: 'primeAutoComplete',
       id: 'chips',
@@ -27,7 +41,7 @@ const schema
     },
   ]
 
-const data = { }
+const data = { id: { id: '1', name: 'Tom', value: '123' } }
 </script>
 
 <template>

src/components/PrimeAutoComplete.vue

@@ -12,6 +12,8 @@ export interface FormKitPrimeAutoCompleteProps {
   dropdown?: AutoCompleteProps['dropdown']
   multiple?: AutoCompleteProps['multiple']
   typeahead?: AutoCompleteProps['typeahead']
+  optionLabel?: AutoCompleteProps['optionLabel']
+  options?: any[] | undefined
 }
 
 const props = defineProps({
@@ -26,7 +28,14 @@ const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useForm
 const suggestions = ref([])
 
 function search(event: AutoCompleteCompleteEvent) {
-  suggestions.value = props.context?.attrs.complete(event.query)
+  if (props.context?.options && props.context?.optionLabel) {
+    suggestions.value = props.context.options.filter((option) => {
+      return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase())
+    })
+  }
+  else {
+    suggestions.value = props.context?.attrs.complete(event.query)
+  }
 }
 </script>
 
@@ -43,6 +52,7 @@ function search(event: AutoCompleteCompleteEvent) {
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"
       :suggestions="suggestions"
+      :option-label="context?.optionLabel"
       :dropdown="context?.dropdown ?? false"
       :multiple="context?.multiple ?? false"
       :typeahead="context?.typeahead ?? true"

src/definitions/input.ts

@@ -26,7 +26,7 @@ import PrimeToggleSwitch from '../components/PrimeToggleSwitch.vue'
 import PrimeTreeSelect from '../components/PrimeTreeSelect.vue'
 
 export const primeAutoCompleteDefinition: FormKitTypeDefinition = createInput(PrimeAutoComplete, {
-  props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead'],
+  props: ['pt', 'ptOptions', 'unstyled', 'Select', 'multiple', 'typeahead', 'optionLabel', 'options'],
 })
 export const primeInputTextDefinition: FormKitTypeDefinition = createInput(PrimeInputText, {
   props: ['pt', 'ptOptions', 'unstyled', 'placeholder', 'iconPrefix', 'iconSuffix'],