@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/autosuggests.json

@@ -0,0 +1,710 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:24.101Z",
+    "source": "https://uikit.developers.rio.cloud/#components/autosuggests",
+    "category": "Components",
+    "section": "Selection",
+    "slug": "components/autosuggests",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "daa6c190a9aaf6c5041c09bd16cbc8da58dbb0a2694826001a834bf868f87f50"
+  },
+  "title": "AutoSuggest",
+  "lead": "For a more flexible and smart search we highly recommend using fuse.js as searching algorithm. For more information on how to configure it, see: https://fusejs.io",
+  "content": [
+    {
+      "heading": "AutoSuggest",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"form-group\"><label>Simple examples without searching algorithm</label><div class=\"row\"><div class=\"col-sm-6 col-md-4 form-group\"><label for=\"1\">Basic use</label><div class=\"AutoSuggest dropdown\"><div class=\"input-group width-100pct\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input id=\"1\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\"><span>Suggestion 1</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\"><span>Suggestion 2</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\"><span>Suggestion 3</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\"><span>Suggestion 4</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\"><span>Suggestion 5</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\"><span>Suggestion 6</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\"><span>Suggestion 7</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"7\"><a role=\"menuitem\"><span>Suggestion 8</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"8\"><a role=\"menuitem\"><span>Suggestion 9</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"9\"><a role=\"menuitem\"><span>Suggestion 10</span></a></li></ul></div></div><div class=\"col-sm-6 col-md-4 form-group\"><label for=\"2\">with loading indicator</label><div class=\"AutoSuggest dropdown\"><div class=\"ClearableInput input-group\"><input id=\"2\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul class=\"dropdown-menu\"><div class=\"display-flex justify-content-center padding-10\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></div></ul></div></div><div class=\"col-sm-6 col-md-4 form-group\"><label for=\"3\">with input-group-addon and no closeOnSelect</label><div class=\"AutoSuggest dropdown\"><div class=\"input-group width-100pct\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input id=\"3\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><div class=\"input-group-addon\">.00</div></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\"><span>Suggestion 1</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\"><span>Suggestion 2</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\"><span>Suggestion 3</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\"><span>Suggestion 4</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\"><span>Suggestion 5</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\"><span>Suggestion 6</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\"><span>Suggestion 7</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"7\"><a role=\"menuitem\"><span>Suggestion 8</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"8\"><a role=\"menuitem\"><span>Suggestion 9</span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"9\"><a role=\"menuitem\"><span>Suggestion 10</span></a></li></ul></div></div><div class=\"col-sm-6 col-md-4 form-group\"><label for=\"4\">Disabled Autosuggest</label><div class=\"AutoSuggest dropdown\"><div class=\"ClearableInput input-group pointer-events-none\"><input id=\"4\" class=\"form-control disabled\" autocomplete=\"off\" type=\"text\" disabled=\"\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"col-sm-6 col-md-4\"><div class=\"form-group has-feedback has-error\"><label for=\"5\">Autosuggest with error</label><div class=\"AutoSuggest dropdown\"><div class=\"ClearableInput input-group has-error\"><input id=\"5\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\">Suggestion 1</a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\">Suggestion 2</a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">Suggestion 3</a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\">Suggestion 4</a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\">Suggestion 5</a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\">Suggestion 6</a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\">Suggestion 7</a></li><li role=\"presentation\" class=\"\" data-item-index=\"7\"><a role=\"menuitem\">Suggestion 8</a></li><li role=\"presentation\" class=\"\" data-item-index=\"8\"><a role=\"menuitem\">Suggestion 9</a></li><li role=\"presentation\" class=\"\" data-item-index=\"9\"><a role=\"menuitem\">Suggestion 10</a></li></ul></div><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span></div></div><div class=\"col-sm-6 col-md-4\"><div class=\"form-group has-feedback has-warning\"><label for=\"7\">Autosuggest with warning and addons</label><div class=\"AutoSuggest dropdown\"><div class=\"input-group width-100pct\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group has-error\"><input id=\"7\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><div class=\"input-group-addon\"><span class=\"rioglyph rioglyph-trash cursor-pointer text-color-gray hover-text-color-danger\"></span></div></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\">Suggestion 1</a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\">Suggestion 2</a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">Suggestion 3</a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\">Suggestion 4</a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\">Suggestion 5</a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\">Suggestion 6</a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\">Suggestion 7</a></li><li role=\"presentation\" class=\"\" data-item-index=\"7\"><a role=\"menuitem\">Suggestion 8</a></li><li role=\"presentation\" class=\"\" data-item-index=\"8\"><a role=\"menuitem\">Suggestion 9</a></li><li role=\"presentation\" class=\"\" data-item-index=\"9\"><a role=\"menuitem\">Suggestion 10</a></li></ul></div><span class=\"form-control-feedback margin-right-25\"><span class=\"rioglyph rioglyph-warning-sign margin-right-10\"></span></span><span class=\"help-block\">There is something wrong here</span></div></div><div class=\"col-sm-6 col-md-4\"><div class=\"form-group display-flex flex-column align-items-end\"><label for=\"6\">Autosuggest with drop up and right aligned</label><div class=\"\"><div class=\"AutoSuggest dropdown dropup width-150\"><div class=\"ClearableInput input-group\"><input id=\"6\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul role=\"menu\" class=\"dropdown-menu pull-right\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\">Suggestion 1</a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\">Suggestion 2</a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">Suggestion 3</a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\">Suggestion 4</a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\">Suggestion 5</a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\">Suggestion 6</a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\">Suggestion 7</a></li><li role=\"presentation\" class=\"\" data-item-index=\"7\"><a role=\"menuitem\">Suggestion 8</a></li><li role=\"presentation\" class=\"\" data-item-index=\"8\"><a role=\"menuitem\">Suggestion 9</a></li><li role=\"presentation\" class=\"\" data-item-index=\"9\"><a role=\"menuitem\">Suggestion 10</a></li></ul></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport AutoSuggest, { type AutoSuggestSuggestion } from '@rio-cloud/rio-uikit/AutoSuggest';\n\nconst simpleSuggestions = Array.from(\n    { length: 10 },\n    (_, index) =>\n        ({\n            label: `Suggestion ${index + 1}`,\n        }) as AutoSuggestSuggestion\n);\n\nconst SimpleAutoSuggestExample = () => {\n    const [value, setValue] = useState('');\n    const [suggestions, setSuggestions] = useState<AutoSuggestSuggestion[]>([]);\n\n    // Autosuggest will call this function every time you need to update suggestions.\n    // It will also be called when the input is cleared. The value would be an empty string in this case.\n    const handleSuggestionsFetchRequested = (result: { value: string }) => {\n        const newValue = result.value;\n        setValue(newValue);\n        setSuggestions(\n            simpleSuggestions.filter(suggestion => suggestion.label?.toLowerCase().includes(newValue.toLowerCase()))\n        );\n    };\n\n    // Use your imagination to render suggestions.\n    const renderSuggestion = (suggestion: AutoSuggestSuggestion) => <span>{suggestion.label}</span>;\n\n    const inputProps = {\n        icon: 'rioglyph rioglyph-search',\n        placeholder: 'Start typing',\n        value,\n    };\n\n    return (\n        <div className='row'>\n            <div className='col-sm-6 col-md-4 form-group'>\n                <label htmlFor='1'>Basic use</label>\n                <AutoSuggest\n                    id='1'\n                    inputProps={inputProps}\n                    suggestions={suggestions}\n                    noItemMessage='This does not look like anything to me'\n                    onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n                    renderSuggestion={renderSuggestion}\n                    openOnFocus\n                />\n            </div>\n\n            <div className='col-sm-6 col-md-4 form-group'>\n                <label htmlFor='2'>with loading indicator</label>\n                <AutoSuggest id='2' isLoading />\n            </div>\n\n            <div className='col-sm-6 col-md-4 form-group'>\n                <label htmlFor='3'>with input-group-addon and no closeOnSelect</label>\n                <AutoSuggest\n                    id='3'\n                    trailingInputAddons={[\n                        <div key='addon-1' className='input-group-addon'>\n                            .00\n                        </div>,\n                    ]}\n                    inputProps={inputProps}\n                    suggestions={suggestions}\n                    noItemMessage='This does not look like anything to me'\n                    onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n                    onSuggestionHighlighted={(highlightedSuggestion: AutoSuggestSuggestion | null) =>\n                        console.log(highlightedSuggestion)\n                    }\n                    renderSuggestion={renderSuggestion}\n                    closeOnSelect={false}\n                />\n            </div>\n\n            <div className='col-sm-6 col-md-4 form-group'>\n                <label htmlFor='4'>Disabled Autosuggest</label>\n                <AutoSuggest id='4' inputProps={{ disabled: true }} />\n            </div>\n\n            <div className='col-sm-6 col-md-4'>\n                <div className='form-group has-feedback has-error'>\n                    <label htmlFor='5'>Autosuggest with error</label>\n                    <AutoSuggest id='5' inputProps={{ hasError: true }} suggestions={suggestions} />\n                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n                </div>\n            </div>\n\n            <div className='col-sm-6 col-md-4'>\n                <div className='form-group has-feedback has-warning'>\n                    <label htmlFor='7'>Autosuggest with warning and addons</label>\n                    <AutoSuggest\n                        id='7'\n                        inputProps={{ hasError: true, ...inputProps }}\n                        suggestions={suggestions}\n                        onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n                        trailingInputAddons={[\n                            <div key='remove' className='input-group-addon' onClick={() => {}}>\n                                <span className='rioglyph rioglyph-trash cursor-pointer text-color-gray hover-text-color-danger' />\n                            </div>,\n                        ]}\n                    />\n                    <span className='form-control-feedback margin-right-25'>\n                        <span className='rioglyph rioglyph-warning-sign margin-right-10' />\n                    </span>\n                    <span className='help-block'>There is something wrong here</span>\n                </div>\n            </div>\n\n            <div className='col-sm-6 col-md-4'>\n                <div className='form-group display-flex flex-column align-items-end'>\n                    <label htmlFor='6'>Autosuggest with drop up and right aligned</label>\n                    <div className=''>\n                        <AutoSuggest id='6' className='width-150' suggestions={suggestions} pullRight dropup />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default SimpleAutoSuggestExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"form-group\">\n        <label>Simple examples without searching algorithm</label>\n        <div class=\"row\">\n            <div class=\"col-sm-6 col-md-4 form-group\">\n                <label for=\"1\">Basic use</label>\n                <div class=\"AutoSuggest dropdown\">\n                    <div class=\"input-group width-100pct\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input id=\"1\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                            <span class=\"clearButton hide\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <ul role=\"menu\" class=\"dropdown-menu\">\n                        <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 1</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 2</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 3</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 4</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 5</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 6</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 7</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"7\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 8</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"8\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 9</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"9\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 10</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"col-sm-6 col-md-4 form-group\">\n                <label for=\"2\">with loading indicator</label>\n                <div class=\"AutoSuggest dropdown\">\n                    <div class=\"ClearableInput input-group\">\n                        <input id=\"2\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                        <span class=\"clearButton hide\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                    </div>\n                    <ul class=\"dropdown-menu\">\n                        <div class=\"display-flex justify-content-center padding-10\">\n                            <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                                <div class=\"spinner\">\n                                    <div>\n                                    </div>\n                                    <div>\n                                    </div>\n                                    <div>\n                                    </div>\n                                    <div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"col-sm-6 col-md-4 form-group\">\n                <label for=\"3\">with input-group-addon and no closeOnSelect</label>\n                <div class=\"AutoSuggest dropdown\">\n                    <div class=\"input-group width-100pct\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input id=\"3\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                            <span class=\"clearButton hide\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"input-group-addon\">.00</div>\n                    </div>\n                    <ul role=\"menu\" class=\"dropdown-menu\">\n                        <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 1</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 2</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 3</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 4</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 5</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 6</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 7</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"7\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 8</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"8\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 9</span>\n                            </a>\n                        </li>\n                        <li role=\"presentation\" class=\"\" data-item-index=\"9\">\n                            <a role=\"menuitem\">\n                                <span>Suggestion 10</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"col-sm-6 col-md-4 form-group\">\n                <label for=\"4\">Disabled Autosuggest</label>\n                <div class=\"AutoSuggest dropdown\">\n                    <div class=\"ClearableInput input-group pointer-events-none\">\n                        <input id=\"4\" class=\"form-control disabled\" autocomplete=\"off\" type=\"text\" disabled=\"\" tabindex=\"0\" value=\"\">\n                        <span class=\"clearButton hide\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-sm-6 col-md-4\">\n                <div class=\"form-group has-feedback has-error\">\n                    <label for=\"5\">Autosuggest with error</label>\n                    <div class=\"AutoSuggest dropdown\">\n                        <div class=\"ClearableInput input-group has-error\">\n                            <input id=\"5\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                            <span class=\"clearButton hide\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                        <ul role=\"menu\" class=\"dropdown-menu\">\n                            <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                                <a role=\"menuitem\">Suggestion 1</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                                <a role=\"menuitem\">Suggestion 2</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                                <a role=\"menuitem\">Suggestion 3</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                                <a role=\"menuitem\">Suggestion 4</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                                <a role=\"menuitem\">Suggestion 5</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                                <a role=\"menuitem\">Suggestion 6</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                                <a role=\"menuitem\">Suggestion 7</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"7\">\n                                <a role=\"menuitem\">Suggestion 8</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"8\">\n                                <a role=\"menuitem\">Suggestion 9</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"9\">\n                                <a role=\"menuitem\">Suggestion 10</a>\n                            </li>\n                        </ul>\n                    </div>\n                    <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n                    </span>\n                </div>\n            </div>\n            <div class=\"col-sm-6 col-md-4\">\n                <div class=\"form-group has-feedback has-warning\">\n                    <label for=\"7\">Autosuggest with warning and addons</label>\n                    <div class=\"AutoSuggest dropdown\">\n                        <div class=\"input-group width-100pct\">\n                            <span class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                </span>\n                            </span>\n                            <div class=\"ClearableInput input-group has-error\">\n                                <input id=\"7\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                                <span class=\"clearButton hide\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                            </div>\n                            <div class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph-trash cursor-pointer text-color-gray hover-text-color-danger\">\n                                </span>\n                            </div>\n                        </div>\n                        <ul role=\"menu\" class=\"dropdown-menu\">\n                            <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                                <a role=\"menuitem\">Suggestion 1</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                                <a role=\"menuitem\">Suggestion 2</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                                <a role=\"menuitem\">Suggestion 3</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                                <a role=\"menuitem\">Suggestion 4</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                                <a role=\"menuitem\">Suggestion 5</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                                <a role=\"menuitem\">Suggestion 6</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                                <a role=\"menuitem\">Suggestion 7</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"7\">\n                                <a role=\"menuitem\">Suggestion 8</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"8\">\n                                <a role=\"menuitem\">Suggestion 9</a>\n                            </li>\n                            <li role=\"presentation\" class=\"\" data-item-index=\"9\">\n                                <a role=\"menuitem\">Suggestion 10</a>\n                            </li>\n                        </ul>\n                    </div>\n                    <span class=\"form-control-feedback margin-right-25\">\n                        <span class=\"rioglyph rioglyph-warning-sign margin-right-10\">\n                        </span>\n                    </span>\n                    <span class=\"help-block\">There is something wrong here</span>\n                </div>\n            </div>\n            <div class=\"col-sm-6 col-md-4\">\n                <div class=\"form-group display-flex flex-column align-items-end\">\n                    <label for=\"6\">Autosuggest with drop up and right aligned</label>\n                    <div class=\"\">\n                        <div class=\"AutoSuggest dropdown dropup width-150\">\n                            <div class=\"ClearableInput input-group\">\n                                <input id=\"6\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                                <span class=\"clearButton hide\">\n                                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                    </span>\n                                </span>\n                            </div>\n                            <ul role=\"menu\" class=\"dropdown-menu pull-right\">\n                                <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                                    <a role=\"menuitem\">Suggestion 1</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                                    <a role=\"menuitem\">Suggestion 2</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                                    <a role=\"menuitem\">Suggestion 3</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                                    <a role=\"menuitem\">Suggestion 4</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                                    <a role=\"menuitem\">Suggestion 5</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                                    <a role=\"menuitem\">Suggestion 6</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                                    <a role=\"menuitem\">Suggestion 7</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"7\">\n                                    <a role=\"menuitem\">Suggestion 8</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"8\">\n                                    <a role=\"menuitem\">Suggestion 9</a>\n                                </li>\n                                <li role=\"presentation\" class=\"\" data-item-index=\"9\">\n                                    <a role=\"menuitem\">Suggestion 10</a>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "suggestions",
+                      "type": "Array",
+                      "default": "[]",
+                      "description": "Array of items which will be displayed. Items can be arbitrary objects as long as they have a label defined."
+                    },
+                    {
+                      "name": "onSuggestionsFetchRequested",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which will be called every time you need to recalculate suggestions e.i. when the filter is updates after each input. It will also be called when the input is cleared. The value would be an empty string in this case."
+                    },
+                    {
+                      "name": "onSuggestionSelected",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function which will be called when a suggestion is selected from the dropdown menu."
+                    },
+                    {
+                      "name": "onSuggestionHighlighted",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function which will be called every time the highlighted selection changes."
+                    },
+                    {
+                      "name": "renderSuggestion",
+                      "type": "Function",
+                      "default": "(suggestion) => suggestion.label",
+                      "description": "Function that defines how suggestions are rendered on the dropdown-menu.Use this to customize the appearance for instance when you want to show an icon for a suggestion."
+                    },
+                    {
+                      "name": "getSuggestionValue",
+                      "type": "Function",
+                      "default": "(suggestion) => suggestion.label",
+                      "description": "Function that returns a string which will be displayed inside the input. This is required when a custom render function for suggestions is provided. Overwrite this function to provide the value to be used for a suggestion."
+                    },
+                    {
+                      "name": "pullRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens right aligned or not. Set to true additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle."
+                    },
+                    {
+                      "name": "autoDropDirection",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Boolean that enables autoDrop feature."
+                    },
+                    {
+                      "name": "closeOnSelect",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Boolean that enables the selection of an item to close the dropdown or not."
+                    },
+                    {
+                      "name": "openOnFocus",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean that enables opening the dropdown menu when gaining focus."
+                    },
+                    {
+                      "name": "noItemMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text that will be shown when there is not match found. If nothing is defined the dropdown-menu will not be rendered."
+                    },
+                    {
+                      "name": "dropdownClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the dropdown element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping element."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms."
+                    },
+                    {
+                      "name": "isLoading",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Shows a loading spinner instead of the items if set to true."
+                    },
+                    {
+                      "name": "showSelectedItemsInInput",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether or not a selected item is shown in the input after it was selected."
+                    },
+                    {
+                      "name": "leadingInputAddons",
+                      "type": "Array of Nodes",
+                      "default": "",
+                      "description": "Adds a list of input-addons elements in front of the input."
+                    },
+                    {
+                      "name": "trailingInputAddons",
+                      "type": "Array of Nodes",
+                      "default": "",
+                      "description": "Adds a list of input-addons elements after the input."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Additional props to be passed to the underlying ClearableInput component:",
+                  "rows": [
+                    {
+                      "name": "inputProps",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Object to define properties for the input component. For the input, the ClearableInput component is used. The following props are part of the inputProps:"
+                    },
+                    {
+                      "name": "└value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The value to be set for the input. Like this the input can be controlled from the outside."
+                    },
+                    {
+                      "name": "└onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "DEPRECATED - Callback function which will be called when the input changes. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed."
+                    },
+                    {
+                      "name": "└onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which will be called when the input is cleared. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed."
+                    },
+                    {
+                      "name": "└onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus."
+                    },
+                    {
+                      "name": "└onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gaines focus."
+                    },
+                    {
+                      "name": "└placeholder",
+                      "type": "String",
+                      "default": "Start typing ...",
+                      "description": "String that will be displayed inside the input when nothing is typed in. Default: Start typing ..."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search"
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean value that disabled the input component."
+                    },
+                    {
+                      "name": "└hasError",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean value that adds the class has-error to the input component. Use this for validation use cases. The Autosuggest component should be wrapped in a form-group element with the class has-feedback"
+                    },
+                    {
+                      "name": "└tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "└inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The React ref for the underlying input."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the input component."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Selecting multiple items",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"form-group\"><label for=\"multiAutoSuggest\">Example for selecting multiple items</label><div class=\"AutoSuggest dropdown dropup max-width-800\"><div class=\"ClearableInput input-group\"><input id=\"multiAutoSuggest\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div><ul role=\"menu\" class=\"dropdown-menu\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\">suggestion 1</a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\">suggestion 2</a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\">suggestion 3</a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\">suggestion 4</a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\">suggestion 5</a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\">suggestion 6</a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\">suggestion 7</a></li><li role=\"presentation\" class=\"\" data-item-index=\"7\"><a role=\"menuitem\">suggestion 8</a></li><li role=\"presentation\" class=\"\" data-item-index=\"8\"><a role=\"menuitem\">suggestion 9</a></li></ul></div><div class=\"taglist taglist-autowidth margin-top-15\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useEffect } from 'react';\n\nimport AutoSuggest, { type AutoSuggestSuggestion, type SelectedSuggestion } from '@rio-cloud/rio-uikit/AutoSuggest';\nimport Tag from '@rio-cloud/rio-uikit/Tag';\nimport TagList from '@rio-cloud/rio-uikit/TagList';\n\nconst defaultSuggestions = Array.from(\n    { length: 9 },\n    (_, index) =>\n        ({\n            label: `suggestion ${index + 1}`,\n        }) as AutoSuggestSuggestion\n);\n\nconst removeItemByLabel = (itemToRemove: AutoSuggestSuggestion, itemList: AutoSuggestSuggestion[]) =>\n    itemList.filter(item => item.label !== itemToRemove.label);\n\nconst filterSuggestions = (suggestions: AutoSuggestSuggestion[], selectedItemLabels: string[], value: string) =>\n    suggestions.filter(suggestion => {\n        const label = suggestion.label;\n        if (!label) {\n            return false;\n        }\n        return label.includes(value) && !selectedItemLabels.includes(label) && !suggestion.header;\n    });\n\nconst MultiAutoSuggestExample = () => {\n    const [selectedItems, setSelectedItems] = useState<AutoSuggestSuggestion[]>([]);\n    const [inputValue, setInputValue] = useState('');\n    const [currentSuggestions, setCurrentSuggestions] = useState<AutoSuggestSuggestion[]>(defaultSuggestions);\n\n    useEffect(() => {\n        const selectedItemLabels = selectedItems.map(item => item.label);\n        const value = inputValue || '';\n\n        const filteredList = filterSuggestions(defaultSuggestions, selectedItemLabels, value);\n        setCurrentSuggestions(filteredList);\n    }, [selectedItems, inputValue, defaultSuggestions]);\n\n    const handleSuggestionSelected = (_: unknown, selectedSuggestion: SelectedSuggestion) => {\n        setSelectedItems([...selectedItems, selectedSuggestion.suggestion]);\n        setCurrentSuggestions(removeItemByLabel(selectedSuggestion.suggestion, currentSuggestions));\n    };\n\n    const handleRemoveSelectedItem = (itemToRemove: AutoSuggestSuggestion) => {\n        setSelectedItems(removeItemByLabel(itemToRemove, selectedItems));\n        const result = defaultSuggestions.find(item => item.label === itemToRemove.label)!;\n        setCurrentSuggestions([...currentSuggestions, result]);\n        setInputValue('');\n    };\n\n    const handleChangeValue = ({ value }: { value: string }) => {\n        setInputValue(value);\n    };\n\n    const inputProps = {\n        onChange: (_: any, data: any) => console.log(data),\n        placeholder: 'Start typing',\n        value: inputValue,\n    };\n\n    return (\n        <>\n            <AutoSuggest\n                id='multiAutoSuggest'\n                inputProps={inputProps}\n                suggestions={currentSuggestions}\n                noItemMessage='This does not look like anything to me'\n                onSuggestionSelected={handleSuggestionSelected}\n                onSuggestionsFetchRequested={handleChangeValue}\n                openOnFocus\n                className='max-width-800'\n            />\n            <TagList className='margin-top-15'>\n                {selectedItems.map(item => (\n                    <Tag\n                        key={item.label}\n                        className='bg-lightest'\n                        size='small'\n                        round={false}\n                        deletable\n                        onClick={() => handleRemoveSelectedItem(item)}\n                    >\n                        {item.label}\n                    </Tag>\n                ))}\n            </TagList>\n        </>\n    );\n};\n\nexport default MultiAutoSuggestExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"form-group\">\n        <label for=\"multiAutoSuggest\">Example for selecting multiple items</label>\n        <div class=\"AutoSuggest dropdown dropup max-width-800\">\n            <div class=\"ClearableInput input-group\">\n                <input id=\"multiAutoSuggest\" placeholder=\"Start typing\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                <span class=\"clearButton hide\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n            <ul role=\"menu\" class=\"dropdown-menu\">\n                <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                    <a role=\"menuitem\">suggestion 1</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                    <a role=\"menuitem\">suggestion 2</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                    <a role=\"menuitem\">suggestion 3</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                    <a role=\"menuitem\">suggestion 4</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                    <a role=\"menuitem\">suggestion 5</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                    <a role=\"menuitem\">suggestion 6</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                    <a role=\"menuitem\">suggestion 7</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"7\">\n                    <a role=\"menuitem\">suggestion 8</a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"8\">\n                    <a role=\"menuitem\">suggestion 9</a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"taglist taglist-autowidth margin-top-15\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "suggestions",
+                      "type": "Array",
+                      "default": "[]",
+                      "description": "Array of items which will be displayed. Items can be arbitrary objects as long as they have a label defined."
+                    },
+                    {
+                      "name": "onSuggestionsFetchRequested",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which will be called every time you need to recalculate suggestions e.i. when the filter is updates after each input. It will also be called when the input is cleared. The value would be an empty string in this case."
+                    },
+                    {
+                      "name": "onSuggestionSelected",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function which will be called when a suggestion is selected from the dropdown menu."
+                    },
+                    {
+                      "name": "onSuggestionHighlighted",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function which will be called every time the highlighted selection changes."
+                    },
+                    {
+                      "name": "renderSuggestion",
+                      "type": "Function",
+                      "default": "(suggestion) => suggestion.label",
+                      "description": "Function that defines how suggestions are rendered on the dropdown-menu.Use this to customize the appearance for instance when you want to show an icon for a suggestion."
+                    },
+                    {
+                      "name": "getSuggestionValue",
+                      "type": "Function",
+                      "default": "(suggestion) => suggestion.label",
+                      "description": "Function that returns a string which will be displayed inside the input. This is required when a custom render function for suggestions is provided. Overwrite this function to provide the value to be used for a suggestion."
+                    },
+                    {
+                      "name": "pullRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens right aligned or not. Set to true additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle."
+                    },
+                    {
+                      "name": "autoDropDirection",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Boolean that enables autoDrop feature."
+                    },
+                    {
+                      "name": "closeOnSelect",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Boolean that enables the selection of an item to close the dropdown or not."
+                    },
+                    {
+                      "name": "openOnFocus",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean that enables opening the dropdown menu when gaining focus."
+                    },
+                    {
+                      "name": "noItemMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text that will be shown when there is not match found. If nothing is defined the dropdown-menu will not be rendered."
+                    },
+                    {
+                      "name": "dropdownClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the dropdown element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping element."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms."
+                    },
+                    {
+                      "name": "isLoading",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Shows a loading spinner instead of the items if set to true."
+                    },
+                    {
+                      "name": "showSelectedItemsInInput",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether or not a selected item is shown in the input after it was selected."
+                    },
+                    {
+                      "name": "leadingInputAddons",
+                      "type": "Array of Nodes",
+                      "default": "",
+                      "description": "Adds a list of input-addons elements in front of the input."
+                    },
+                    {
+                      "name": "trailingInputAddons",
+                      "type": "Array of Nodes",
+                      "default": "",
+                      "description": "Adds a list of input-addons elements after the input."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Additional props to be passed to the underlying ClearableInput component:",
+                  "rows": [
+                    {
+                      "name": "inputProps",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Object to define properties for the input component. For the input, the ClearableInput component is used. The following props are part of the inputProps:"
+                    },
+                    {
+                      "name": "└value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The value to be set for the input. Like this the input can be controlled from the outside."
+                    },
+                    {
+                      "name": "└onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "DEPRECATED - Callback function which will be called when the input changes. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed."
+                    },
+                    {
+                      "name": "└onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which will be called when the input is cleared. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed."
+                    },
+                    {
+                      "name": "└onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus."
+                    },
+                    {
+                      "name": "└onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gaines focus."
+                    },
+                    {
+                      "name": "└placeholder",
+                      "type": "String",
+                      "default": "Start typing ...",
+                      "description": "String that will be displayed inside the input when nothing is typed in. Default: Start typing ..."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search"
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean value that disabled the input component."
+                    },
+                    {
+                      "name": "└hasError",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean value that adds the class has-error to the input component. Use this for validation use cases. The Autosuggest component should be wrapped in a form-group element with the class has-feedback"
+                    },
+                    {
+                      "name": "└tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "└inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The React ref for the underlying input."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the input component."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Detailed example with flexible matching",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"form-group\"><label for=\"complexAutoSuggest\">Full example, with fusejs suggestion rendering</label><div class=\"AutoSuggest dropdown dropup form-group max-width-800\"><div class=\"input-group width-100pct\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input id=\"complexAutoSuggest\" placeholder=\"Search content\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><ul role=\"menu\" class=\"dropdown-menu foobar\"><li role=\"presentation\" class=\"\" data-item-index=\"0\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-driver\"></span><span>Driver A-47</span></span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"1\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-driver\"></span><span>Driver B-52</span></span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"2\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-driver\"></span><span>Driver T-800</span></span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"3\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-truck\"></span><span>Truck D-800</span></span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"4\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-truck\"></span><span>Truck Y-ME</span></span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"5\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-truck\"></span><span>Truck Z-FG</span></span></a></li><li role=\"presentation\" class=\"\" data-item-index=\"6\"><a role=\"menuitem\"><span class=\"display-flex align-items-center gap-3\"><span class=\"rioglyph rioglyph-truck\"></span><span>Truck R-BM</span></span></a></li></ul></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport Fuse from 'fuse.js';\n\nimport AutoSuggest, { type AutoSuggestSuggestion, type SelectedSuggestion } from '@rio-cloud/rio-uikit/AutoSuggest';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\ntype CustomSuggestion = AutoSuggestSuggestion & {\n    vehicleName: string;\n    type: string;\n};\n\nconst allSuggestions: CustomSuggestion[] = [\n    {\n        vehicleName: 'Driver A-47',\n        type: 'driver',\n    },\n    {\n        vehicleName: 'Driver B-52',\n        type: 'driver',\n    },\n    {\n        vehicleName: 'Driver T-800',\n        type: 'driver',\n    },\n    {\n        vehicleName: 'Truck D-800',\n        type: 'truck',\n    },\n    {\n        vehicleName: 'Truck Y-ME',\n        type: 'truck',\n    },\n    {\n        vehicleName: 'Truck Z-FG',\n        type: 'truck',\n    },\n    {\n        vehicleName: 'Truck R-BM',\n        type: 'truck',\n    },\n];\n\n// Teach AutoSuggest how to calculate suggestions for any given input value.\nconst getSuggestions = (value: string) => {\n    const options = {\n        location: 0,\n        threshold: 0.5,\n        distance: 100,\n        minMatchCharLength: 1,\n        keys: ['vehicleName', 'type'],\n    };\n    const fuse = new Fuse(allSuggestions, options);\n    return !value ? allSuggestions : fuse.search(value).map(result => result.item);\n};\n\nconst ComplexAutoSuggestExample = () => {\n    const [value, setValue] = useState('');\n    const [suggestions, setSuggestions] = useState<CustomSuggestion[]>([]);\n\n    // Autosuggest will call this function every time you need to update suggestions.\n    const handleSuggestionsFetchRequested = ({ value }: { value: string }) => {\n        setValue(value);\n        setSuggestions(getSuggestions(value));\n    };\n\n    const handleSuggestionSelected = (_: any, { suggestionValue }: SelectedSuggestion) => {\n        Notification.info(suggestionValue);\n    };\n\n    // Only needed when you want to react on the event, otherwise skip it\n    const handleBlur = () => console.log('focus lost');\n\n    // Only needed when you want to react on the event, otherwise skip it\n    const handleFocus = () => console.log('gained focus');\n\n    // Use your imagination to render custom suggestions\n    const renderSuggestion = (suggestion: AutoSuggestSuggestion) => {\n        const { vehicleName, type } = suggestion as CustomSuggestion;\n        return (\n            <span key={vehicleName} className='display-flex align-items-center gap-3'>\n                <span className={`rioglyph rioglyph-${type}`} />\n                <span>{vehicleName}</span>\n            </span>\n        );\n    };\n\n    const inputProps = {\n        id: 'complexAutoSuggest',\n        onBlur: handleBlur,\n        onFocus: handleFocus,\n        className: '',\n        placeholder: 'Search content',\n        icon: 'rioglyph-search',\n        hasError: false,\n        value,\n    };\n\n    return (\n        <AutoSuggest\n            className='form-group max-width-800'\n            dropdownClassName='foobar'\n            inputProps={inputProps}\n            suggestions={suggestions}\n            noItemMessage='Computer says no'\n            onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n            onSuggestionSelected={handleSuggestionSelected}\n            // Optional custom selection handler if the selection is more complex or uses different suggestion keys\n            // getSuggestionValue={(suggestion: AutoSuggestSuggestion) => (suggestion as CustomSuggestion).type}\n            renderSuggestion={renderSuggestion}\n            customSuggestionKey='vehicleName'\n        />\n    );\n};\n\nexport default ComplexAutoSuggestExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"form-group\">\n        <label for=\"complexAutoSuggest\">Full example, with fusejs suggestion rendering</label>\n        <div class=\"AutoSuggest dropdown dropup form-group max-width-800\">\n            <div class=\"input-group width-100pct\">\n                <span class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                    </span>\n                </span>\n                <div class=\"ClearableInput input-group\">\n                    <input id=\"complexAutoSuggest\" placeholder=\"Search content\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                    <span class=\"clearButton hide\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                </div>\n            </div>\n            <ul role=\"menu\" class=\"dropdown-menu foobar\">\n                <li role=\"presentation\" class=\"\" data-item-index=\"0\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-driver\">\n                            </span>\n                            <span>Driver A-47</span>\n                        </span>\n                    </a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"1\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-driver\">\n                            </span>\n                            <span>Driver B-52</span>\n                        </span>\n                    </a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"2\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-driver\">\n                            </span>\n                            <span>Driver T-800</span>\n                        </span>\n                    </a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"3\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-truck\">\n                            </span>\n                            <span>Truck D-800</span>\n                        </span>\n                    </a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"4\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-truck\">\n                            </span>\n                            <span>Truck Y-ME</span>\n                        </span>\n                    </a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"5\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-truck\">\n                            </span>\n                            <span>Truck Z-FG</span>\n                        </span>\n                    </a>\n                </li>\n                <li role=\"presentation\" class=\"\" data-item-index=\"6\">\n                    <a role=\"menuitem\">\n                        <span class=\"display-flex align-items-center gap-3\">\n                            <span class=\"rioglyph rioglyph-truck\">\n                            </span>\n                            <span>Truck R-BM</span>\n                        </span>\n                    </a>\n                </li>\n            </ul>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "suggestions",
+                      "type": "Array",
+                      "default": "[]",
+                      "description": "Array of items which will be displayed. Items can be arbitrary objects as long as they have a label defined."
+                    },
+                    {
+                      "name": "onSuggestionsFetchRequested",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which will be called every time you need to recalculate suggestions e.i. when the filter is updates after each input. It will also be called when the input is cleared. The value would be an empty string in this case."
+                    },
+                    {
+                      "name": "onSuggestionSelected",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function which will be called when a suggestion is selected from the dropdown menu."
+                    },
+                    {
+                      "name": "onSuggestionHighlighted",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function which will be called every time the highlighted selection changes."
+                    },
+                    {
+                      "name": "renderSuggestion",
+                      "type": "Function",
+                      "default": "(suggestion) => suggestion.label",
+                      "description": "Function that defines how suggestions are rendered on the dropdown-menu.Use this to customize the appearance for instance when you want to show an icon for a suggestion."
+                    },
+                    {
+                      "name": "getSuggestionValue",
+                      "type": "Function",
+                      "default": "(suggestion) => suggestion.label",
+                      "description": "Function that returns a string which will be displayed inside the input. This is required when a custom render function for suggestions is provided. Overwrite this function to provide the value to be used for a suggestion."
+                    },
+                    {
+                      "name": "pullRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens right aligned or not. Set to true additionally disables autoDrop feature."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle."
+                    },
+                    {
+                      "name": "autoDropDirection",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Boolean that enables autoDrop feature."
+                    },
+                    {
+                      "name": "closeOnSelect",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Boolean that enables the selection of an item to close the dropdown or not."
+                    },
+                    {
+                      "name": "openOnFocus",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean that enables opening the dropdown menu when gaining focus."
+                    },
+                    {
+                      "name": "noItemMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text that will be shown when there is not match found. If nothing is defined the dropdown-menu will not be rendered."
+                    },
+                    {
+                      "name": "dropdownClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the dropdown element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping element."
+                    },
+                    {
+                      "name": "autoComplete",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets autocomplete value for autosuggest forms."
+                    },
+                    {
+                      "name": "isLoading",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Shows a loading spinner instead of the items if set to true."
+                    },
+                    {
+                      "name": "showSelectedItemsInInput",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether or not a selected item is shown in the input after it was selected."
+                    },
+                    {
+                      "name": "leadingInputAddons",
+                      "type": "Array of Nodes",
+                      "default": "",
+                      "description": "Adds a list of input-addons elements in front of the input."
+                    },
+                    {
+                      "name": "trailingInputAddons",
+                      "type": "Array of Nodes",
+                      "default": "",
+                      "description": "Adds a list of input-addons elements after the input."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Additional props to be passed to the underlying ClearableInput component:",
+                  "rows": [
+                    {
+                      "name": "inputProps",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Object to define properties for the input component. For the input, the ClearableInput component is used. The following props are part of the inputProps:"
+                    },
+                    {
+                      "name": "└value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The value to be set for the input. Like this the input can be controlled from the outside."
+                    },
+                    {
+                      "name": "└onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "DEPRECATED - Callback function which will be called when the input changes. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed."
+                    },
+                    {
+                      "name": "└onClear",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which will be called when the input is cleared. This is usually not needed as the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here for completeness and for certain edge cases. It might be removed in the future when not needed."
+                    },
+                    {
+                      "name": "└onBlur",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input looses the focus."
+                    },
+                    {
+                      "name": "└onFocus",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function which gets triggered when the input gaines focus."
+                    },
+                    {
+                      "name": "└placeholder",
+                      "type": "String",
+                      "default": "Start typing ...",
+                      "description": "String that will be displayed inside the input when nothing is typed in. Default: Start typing ..."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search"
+                    },
+                    {
+                      "name": "└disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean value that disabled the input component."
+                    },
+                    {
+                      "name": "└hasError",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Boolean value that adds the class has-error to the input component. Use this for validation use cases. The Autosuggest component should be wrapped in a form-group element with the class has-feedback"
+                    },
+                    {
+                      "name": "└tabIndex",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex"
+                    },
+                    {
+                      "name": "└inputRef",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The React ref for the underlying input."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the input component."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}