CKEDITOR demo

        
    var englishDictionary = new IFrameBridge(new Worker('../dist/wordfinder.js'));
    absol._({
        tag: 'autocompleteinput',
        style: {
            display: 'block',
            height: '40px',
            'max-width': '500px',
            margin: "10px"
        },
        on: {
            change: function (event, sender) {
                absol.$('span#selected-word', selectedWord).innerHTML = event.value || sender.value;
            }
        },
        props: {
            adapter: {

                queryItems: function (query, mInput) {
                    return englishDictionary.invoke('find', query).then(function (texts) {
                        return texts.map(function (text) {
                            var start = text.toLocaleLowerCase().indexOf(query);
                            if (start >= 0) {
                                var hightlightedText = text.substr(0, start) + '<strong style="color:red">' + text.substr(start, query.length) + '</strong>' + text.substr(start + query.length);
                                return {
                                    text: text,
                                    hightlightedText: hightlightedText
                                }
                            }
                            else return null;
                        }).filter(function (it) { return it !== null; })
                    })
                },

                getItemText: function (item, mInput) {
                    return item.text;
                },

                getItemView: function (item, index, _, $, query, reuseItem, refParent, mInput) {
                    return _({
                        tag: 'div',
                        style: {
                            height: '30px'
                        },
                        child: {
                            tag: 'span',
                            style: {
                                lineHeight: '1.2em'
                            },
                            props: {
                                innerHTML: item.hightlightedText
                            }
                        }
                    })
                }
            }
        }

    }).addTo(document.body);

    var selectedWord = absol._('<div style="height:30px">Selected: <span id="selected-word"></span></div>').addTo(document.body);