Autocomplete

Shows suggestions as you type and helps you create a tag input tool using settings.

Usage #

This example shows how autocomplete works with the default settings. When you type a text, a dropdown layer appears and you can set the value to the input.

Please start typing some fruit from the list:

Apple
Apricot
Avocado
Banana
Breadfruit
Bilberry
Blackberry
Blackcurrant
Blueberry
Boysenberry

<input type="text" name="test" data-kube="autocomplete" data-url="/autocomplete/">

This example shows how the data-target setting works. When you select the item from the autocomplete list, it adds as a label to the target element.

<input type="text" name="test" data-target="#mytarget" data-kube="autocomplete" data-url="/autocomplete/">

// Target
<div id="mytarget"></div>

The example below shows how to display already existing labels in the target element.

<input type="text" name="test" data-target="#mytarget" data-kube="autocomplete" data-url="/autocomplete/">

// Target
<div id="mytarget" data-name="tags">
    <label data-id="1" class="label">
        Apple
        <span class="close"></span>
        <input type="hidden" name="tags[]" value="1">
    </label>
</div>

Settings #

url

Type: Boolean String

Default: false

This setting sets a path to the server side script, which receives the POST variable with the input name.

<input type="text" name="test" data-kube="autocomplete" data-url="/autocomplete/">

The server should return JSON with the list of items like this.

[
    {
        "id": 1,
        "name": "Apple"
    },
    {
        "id":2,
        "name":"Apricot"
    }
]

min

Type: Number

Default: 2

This setting sets the minimum number of characters to query the server.

<input type="text" name="test" data-kube="autocomplete" data-min="1" data-url="/autocomplete/">

param

Type: Boolean String

Default: false

This option sets the name of the POST variable to be sent to the server.

<input type="text" data-kube="autocomplete" data-param="fruit" data-url="/autocomplete/">

target

Type: Boolean String

Default: false

This option sets the element where the values selected from the autocomplete list will be added. Values are added as labels.

<input type="text" data-kube="autocomplete" data-target="mytarget" data-url="/autocomplete/">

// Target
<div id="mytarget"></div>

The module generates the following label code when selecting from the autocomplete list.

<span class="label" data-id="1">
    Value <span class="close"></span>
    <input type="hidden" name="mytarget[]" value="Value">
</span>

As you can see, the module creates an input with the name target. The name can be changed by specifying the target element data-name attribute.

// Target
<div id="mytarget" data-name="tags"></div>

Now input inside the label will be generated with the specified name.

<span class="label" data-id="1">
    Value <span class="close"></span>
    <input type="hidden" name="tags[]" value="Value">
</span>

labelClass

Type: Boolean String

Default: false

This setting sets an additional class for the label, which is added to the target.

<input type="text" data-kube="autocomplete" data-target="mytarget" data-label-class="my-label" data-url="/autocomplete/">

// Target
<div id="mytarget"></div>

Events #

Event Description
set This event fires when you select an item from the autocomplete list.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            autocomplete: {
                set: function(sender, value)
                {
                    console.log('Got it!');
                }
            }
        }
    });
})(Kube);

Catch events from a specific autocomplete module

Set an ID for the autocomplete:

<input type="text" id="myautocomplete" name="test" data-kube="autocomplete" data-url="/autocomplete/">

Or set data-name attribute:

<input type="text" data-name="myautocomplete" name="test" data-kube="autocomplete" data-url="/autocomplete/">

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            autocomplete: {
                set: function(sender, value)
                {
                    if (sender._id === 'myautocomplete')
                    {
                        console.log('Got it!');
                    }
                }
            }
        }
    });
})(Kube);