ractive-autocomplete

Autocomplete component for ractive.js

Install

npm install ractive-autocomplete

Usage

<autocomplete
    text="{{selection.name}}"
    value="{{selection.id}}"
    placeholder="Full name"
    displayMember="name"
    valueMember="id"
    delay="200"
    autoselect="true"
    suggest="{{searchUsers}}"/>

var AutoComplete = require("ractive-autocomplete");
Ractive.components.autocomplete = AutoComplete;

var ractive = new Ractive({
    el: document.querySelector("#container"),
    template: "..."
    data: function() {
        return {
            selection: { name: "bart", id: 1 },
            searchUsers: function(text, callback) {
                var error = null;
                var results = [{ name: "bart", id: 1 }, { name: "bart2", id: 2 }];
                callback(error, results);
            }
        };
    }
});

Parameters

text

Current selected text (string)

value

Current selected value (object)

placeholder

Placeholder text (string)

displayMember

Property to display.

• string: "name"
• function: function(object) { return object.name; }
• null: object

valueMember

Property to bind to value (see displayMember)

delay

Milliseconds to delay autocomplete (set to 0 to autocomplete on every keypress)

autoselect

• true: Automatically select a value if the text matches any of the suggestions
• false: wait for [enter] to select a value

suggest

Autocomplete function(text, callback)

• text: entered text
• callback: function(error, results) to retrieve autocomplete suggestions

CSS classes

• .ractive-autocomplete root element
• input text input
• div suggestions root element
• ul suggestions list
• li suggestion
• li.selected selected suggestion