Read The Docs

📌 Table of Contents

• Features
• React
  • ⚡ Installation & Quick Start
• Shopify
  • ⚡ Installation & Quick Start
• Bundle (Vanilla JS)
  • ⚡ Installation & Quick Start
• 💡 Code Examples
• 🎨 Customization
• 🚀 Advanced Features
• 🛠 Troubleshooting
• 📖 API Reference
• 🔗 Complementary Resources
• 🤝 Contributing
• 📜 License

Features

• 🔌 Easy Integration – Quickly integrate with your app as a plug-and-play React component
• ⚡ Lightweight & Fast – Tiny bundle size, optimized for speed
• 🎨 Customizable UI – With minmal styles, and supports for custom markup
• ⌨️ Keyboard Navigation – Fully supports accessible keyboard naviagation
• ♿ Accessible (a11y) – Built-in ARIA support for screen readers
• 🛡 Written in TypeScript with type safety

React

⚡ Installation & Quick Start

Install the library

npm i @constructor-io/constructorio-ui-autocomplete

Import and use the CioAutocomplete component

import { CioAutocomplete } from '@constructor-io/constructorio-ui-autocomplete';
import '@constructor-io/constructorio-ui-autocomplete/styles.css';

function YourComponent() {
  return (
    <div>
      <CioAutocomplete
        apiKey="key_M57QS8SMPdLdLx4x"
        onSubmit={(e) => {console.log(e)}}
    </div>
  );

Shopify

⚡ Installation & Quick Start

The Constructor autocomplete component is available as part of the Constructor.io Shopify App

After installing the app, you can use the Constructor autocomplete component by clicking 'Add Section' in your theme editor and adding the Constructor autocomplete liquid component

For more in depth instructions, check out the Shopify documentation.

Bundle (Vanilla JS)

This is a framework agnostic method that can be used in any JavaScript project. The CioAutocomplete function provides a simple interface to inject an entire Autocomplete UI into the provided selector. In addition to Autocomplete component props, this function also accepts a selector and includeCSS.

⚡ Installation & Quick Start

Install the library

npm i @constructor-io/constructorio-ui-autocomplete

Import and use the CioAutocomplete component

import CioAutocomplete from '@constructor-io/constructorio-ui-autocomplete/constructorio-ui-autocomplete-bundled';

CioAutocomplete({
  selector: '#autocomplete-container',
  includeCSS: true, // Include the default CSS styles. Defaults to true.
  apiKey: 'key_M57QS8SMPdLdLx4x',
  onSubmit: (submitEvent) => console.dir(submitEvent),
  // ... additional arguments
});
</script>

💡 Code Examples

Ready-to-use, copy-paste examples with explanations.

• Full Featured example
• Render Search Suggestions
• Render Product Suggestions

🔹 For more examples check the full examples

🎨 Customization

CSS styles are not imported by default. Add this to your code to import basic styles

import '@constructor-io/constructorio-ui-autocomplete/styles.css';

All styles are scoped under .cio-autocomplete. You can extend them by targeting that selector.

/* Custom Style Sheet */
.cio-autocomplete .cio-submit-btn {
  border-radius: 10px;
  border: 1px solid red;
}

If you'd like to override or extend the base className, you can do so with the autocompleteClassName argument

import { CioAutocomplete } from '@constructor-io/constructorio-ui-autocomplete';
import '@constructor-io/constructorio-ui-autocomplete/styles.css';

function YourComponent() {
  return (
    <div>
      <CioAutocomplete
        apiKey="key_M57QS8SMPdLdLx4x"
        onSubmit={(e) => { console.log(e)}}
        autocompleteClassName="cio-autocomplete custom-autocomplete-container"
      />
    </div>
  );

Then you can modify styles like so

/* Custom Style Sheet */
.cio-autocomplete.custom-autocomplete-styles .cio-input {
  font-weight: bold;
}

🚀 Advanced Features

• Terms With Group Suggestions
• Filtered Suggestions
• Terms With Images And Counts

🔹 For more advanced use cases check the full documentation

🛠 Troubleshooting

Common issues and solutions.

💬 Need help? Join our GitHub Discussions

📖 API Reference

• Full API docs: Click here

🔗 Complementary Resources

• 📖 Full Documentation: Storybook
• 📦 JS Client: SDK Documentation
• 🛒 Shopify App: App Store Link
• 🌐 Constructor's REST API: Autocomplete

🤝 Contributing

1. Fork the repo & create a new branch.
2. Run npm install to install dependencies.
3. After making the desired changes, run npm run tests && npm run lint locally.
4. Submit a PR for review.

📜 License

MIT License

Copyright (c) 2022-present Constructor.io Corporation