This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Coffeekraken s-autocomplete-component

Easily create fully customizable autocomplete dropdown

Table of content

1. Demo
2. Install
3. Get Started
4. Set the input target value
5. Javascript API
6. SASS API
7. Sugar Web Components Documentation
8. Browsers support
9. Code linting
10. Contribute
11. Who are Coffeekraken?
12. Licence

Install

npm install coffeekraken-s-autocomplete-component --save

Get Started

First, import the component into your javascript file like so:

import SAutocompleteComponent from 'coffeekraken-s-autocomplete-component'

Then simply use it inside your html like so:

<input type="search" name="my-cool-input" placeholder="Keywords..." />
<s-autocomplete for="my-cool-input" endpoint="//api.my-cool-domain.com/search">
  <template>
    <!-- this is a mustache template feeded with each results
    sended back from your api in json format -->
    <span class="something-cool">{{title}}</span>
    <p class="something">{{body}}</p>
  </template>
</s-autocomplete>

Endpoint

Finally, create the endpoint that you have specified for your autocomplete. This endpoint has to return an array of objects in JSON, something like this:

[
  {
    "title": "Hello",
    "body": "Vestibulum sollicitudin sed elit sit."
  },
  {
    "title": "World",
    "body": "In facilisis nulla sit amet."
  }
]

Assuming that the endpoint is //api.my-cool-domain.com/search, and the query filled in the target input is hello, the called endpoint will be:

• //api.my-cool-domain.com/search?q=hello

You'll have all you need to filter the results in your backend and return only what fit to the query back.

Styles

You can also generate the base style for your autocomplete like so:

First, import and setup the Coffeekraken Sugar toolkit

Then, import and generate the autocomplete classes:

@import 'node_modules/coffeekraken-s-autocomplete-component/index';
@include s-autocomplete-classes($colors: default primary secondary);

Set the input target value

Your autocomplete can have a complexe display that cannot fit inside an input tag. To attach a simple text value that will populate the target input, you have 3 options:

1. Specify in your mustache template the attribute s-autocomplete-value with the value you want. It's not important on which HTMLElement you put this attribute, juste make sure you have only 1 by row
2. Return from your endpoint api a property value for each autocomplete item. That's it.
3. Do nothing and the autocomplete value will be the entire mustache template striped from all the html tags

Here's the first solution example:

<input type="search" name="my-cool-input" placeholder="Keywords..." />
<s-autocomplete for="my-cool-input" endpoint="//api.my-cool-domain.com/search">
  <template>
    <!-- this is a mustache template feeded with each results
    sended back from your api in json format -->
    <span class="something-cool" s-autocomplete-value="{{title}}"
      >{{title}}</span
    >
    <p class="something">{{body}}</p>
  </template>
</s-autocomplete>

Browsers support

IE / Edge	Firefox	Chrome	Safari
*IE11+	last 2 versions	last 2 versions	last 2 versions

• This component use the Proxy feature that is not natively supported by IE11. You'll need to load a polyfill in order to make it work properly.

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.

The webcomponent API (custom elements, shadowDOM, etc...) is not supported in some older browsers like IE10, etc... In order to make them work, you will need to integrate the corresponding polyfill.

Code linting

This package uses some code linting rules. Here's the list:

1. ESLint for javascript files

Your commits will not been accepted if the code style is not respected!

Contribute

This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

1. Share the love ❤️
2. Declare issues
3. Fix issues
4. Add features
5. Build web component

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

More on who we are

License

The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...