docs(Autocomplete): update examples

Author: mrholek

docs/assets/js/partials/snippets.js

@@ -385,6 +385,43 @@ export default () => {
   }
   // js-docs-end autocomplete-custom-options
 
+  // js-docs-start autocomplete-option-values
+  const myAutoCompleteValues = document.getElementById('myAutoCompleteValues')
+
+  if (myAutoCompleteValues) {
+    new coreui.Autocomplete(myAutoCompleteValues, {
+      cleaner: true,
+      indicator: true,
+      name: 'autocomplete-option-values',
+      options: [
+        { label: 'Product A', value: 1 },
+        { label: 'Product B', value: 2 },
+        { label: 'Product C', value: 3.5 },
+        { label: 'Product D', value: 42 },
+        {
+          label: 'Categories',
+          options: [
+            { label: 'Electronics', value: 100 },
+            { label: 'Books', value: 200 },
+            { label: 'Clothing', value: 300 }
+          ]
+        }
+      ],
+      placeholder: 'Select product by ID...',
+      search: 'global',
+      value: 100
+    })
+
+    // Log the selected value to demonstrate that numbers are converted to strings
+    myAutoCompleteValues.addEventListener('changed.coreui.autocomplete', event => {
+      // eslint-disable-next-line no-console
+      console.log('Selected value:', event.value.value)
+      // eslint-disable-next-line no-console
+      console.log('Selected label:', event.value.label)
+    })
+  }
+  // js-docs-end autocomplete-option-values
+
   // -------------------------------
   // Multi Selects
   // -------------------------------

docs/content/forms/autocomplete.md

@@ -58,6 +58,25 @@ You can organize suggestions into groups using optgroups for better categorizati
 
 {{< js-docs name="autocomplete-grouped-data" file="docs/assets/js/partials/snippets.js" >}}
 
+### Options with values
+
+You can use values in your options array. This is particularly useful when working with database IDs, product codes, or any numeric identifiers. Note that the component internally converts number values to strings for consistency and DOM compatibility.
+
+{{< example stackblitz_pro="true" stackblitz_add_js="true">}}
+<div id="myAutoCompleteValues"></div>
+{{< /example >}}
+
+{{< js-docs name="autocomplete-option-values" file="docs/assets/js/partials/snippets.js" >}}
+
+{{< callout info >}}
+**Important:** While you can pass number values in your options, the component internally converts all values to strings using `String(value)`. When handling selection events, remember that `event.value.value` will always be a string representation of your original number.
+
+For example:
+- Input: `{ label: 'Product A', value: 42 }`
+- Internal storage: `{ label: 'Product A', value: '42' }`
+- Event output: `event.value.value === '42'` (string)
+{{< /callout >}}
+
 ### External data
 
 You can configure CoreUI's AutoComplete component to fetch and display options dynamically from an external API. This is useful when you need to autocomplete data that changes frequently or is too large to preload.