Required script
<script src="https://unpkg.com/vue@2"></script>
<script src="https://cdn.jsdelivr.net/gh/cadenzabox/cadenzabox-autocomplete@latest/cadenzabox-autocomplete.min.js"></script>
// Include font-awesome script only in case you are using 'show-type-icon=true' data attribute
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"/>
Custom tag
<cadenzabox-autocomplete ac-redirect-url="https://demo.cadenzabox.com"></cadenzabox-autocomplete>Available cadenzabox-autocomplete tag props (options)
| Attribute name | Type | Required | Default value |
|---|---|---|---|
| order-tag | string | number | 1 | |
| order-release | string | number | 2 | |
| order-track | string | number | 3 | |
| order-composer | string | number | 4 | |
| base-api-url | string | https://api.cadenzabox.com | |
| ac-redirect-url (your cadenzabox app url) | string | true | https://demo.cadenzabox.com |
| group-by-type | boolean | false | |
| show-type-icon | boolean | false | |
| ui-search-outside | boolean | false | |
| ui-submit-outside | boolean | false | |
| open-in-new-tab | boolean | false | |
| category-name | string | ||
| category-label | string | Popular tags | |
| input-search-placeholder | string | Search here... |
Custom styles (example)
In order to apply custom style you have to use root tag cadenzabox-autocomplete and ::part(element name). This is required because elements are located in shadow-dom
