jqwidgets-ng 19.2.2 → 19.2.3

package/jqwidgets/modules/jqxinput.js

@@ -20,6 +20,30 @@ Copyright (c) 2011-2024 jQWidgets.
 License: https://jqwidgets.com/license/ */
 
 
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+
+/* Release Date: 28-May-2024 
+Copyright (c) 2011-2024 jQWidgets. 
+License: https://jqwidgets.com/license/ */
+
+
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+
+/* Release Date: 28-May-2024 
+Copyright (c) 2011-2024 jQWidgets. 
+License: https://jqwidgets.com/license/ */
+
+
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+
+/* Release Date: 28-May-2024 
+Copyright (c) 2011-2024 jQWidgets. 
+License: https://jqwidgets.com/license/ */
+
+
 /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -8204,7 +8228,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 			// file names, and JQXLite is normally delivered in a lowercase file name.
 			// Do this after creating the global so that if an AMD module wants to call
 			// noConflict to hide this version of JQXLite, it will work.
-			if (   true && __nested_webpack_require_227__.amdO.JQXLite) {
+			if (      true && __nested_webpack_require_227__.amdO.JQXLite) {
 				!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { return JQXLite; }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
 		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
 			}
@@ -17856,1169 +17880,1399 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 
 /* tslint:disable */
 /* eslint-disable */
-(function(){
-	if (typeof document === 'undefined') { 
-		return;
-	}
+(function () {
+    if (typeof document === 'undefined') {
+        return;
+    }
 
-(function ($) {
-    'use strict';
-    $.jqx.jqxWidget('jqxInput', '', {});
+    (function ($) {
+        'use strict';
+        $.jqx.jqxWidget('jqxInput', '', {});
 
-    $.extend($.jqx._jqxInput.prototype, {
-        defineInstance: function () {
-            var that = this;
-            var settings = {
-                disabled: false,
-                filter: that._filter,
-                sort: that._sort,
-                highlight: that._highlight,
-                dropDownWidth: null,
-                renderer: that._renderer,
-                opened: false,
-                $popup: document.createElement('ul'),
-                source: [],
-                roundedCorners: true,
-                searchMode: 'default',
-                placeHolder: '',
-                width: null,
-                height: null,
-                value: '',
-                rtl: false,
-                enableBrowserBoundsDetection: true,
-                hint: true,
-                displayMember: '',
-                valueMember: '',
-                events: ['select', 'open', 'close', 'change'],
-                popupZIndex: 1000,
-                items: 8,
-                minLength: 1,
-                maxLength: null
-            };
-            if (this === $.jqx._jqxInput.prototype) {
+        $.extend($.jqx._jqxInput.prototype, {
+            defineInstance: function () {
+                var that = this;
+                var settings = {
+                    disabled: false,
+                    filter: that._filter,
+                    sort: that._sort,
+                    highlight: that._highlight,
+                    dropDownWidth: null,
+                    renderer: that._renderer,
+                    opened: false,
+                    $popup: document.createElement('ul'),
+                    source: [],
+                    roundedCorners: true,
+                    searchMode: 'default',
+                    placeHolder: '',
+                    width: null,
+                    height: null,
+                    value: '',
+                    rtl: false,
+                    enableBrowserBoundsDetection: true,
+                    hint: true,
+                    displayMember: '',
+                    valueMember: '',
+                    inlineAutoComplete: false,
+                    events: ['select', 'open', 'close', 'change'],
+                    popupZIndex: 1000,
+                    items: 8,
+                    minLength: 1,
+                    maxLength: null,
+                    aiKey: ''
+                };
+                if (this === $.jqx._jqxInput.prototype) {
+                    return settings;
+                }
+                $.extend(true, this, settings);
                 return settings;
-            }
-            $.extend(true, this, settings);
-            return settings;
-        },
+            },
 
-        createInstance: function () {
-            var that = this;
-            if (that.host.css('display') === 'none' || document.body.contains(that.element) === false) {
-                that._initiallyHidden = true;
-            }
-            that._popupHelper = $(that.$popup);
-            that.render();
-        },
+            createInstance: function () {
+                var that = this;
+                if (that.host.css('display') === 'none' || document.body.contains(that.element) === false) {
+                    that._initiallyHidden = true;
+                }
+                that._popupHelper = $(that.$popup);
+                that.render();
+            },
 
-        render: function () {
-            var that = this;
+            getAISuggestions: function (callback) {
+                var that = this;
+                var response = '';
+                if (!that.aiKey) {
+                    callback('');
+                }
+
+                function buildPrompt(textBefore, textAfter) {
+                    var systemMessageBuilder = [];
+                    systemMessageBuilder.push("Predict what text the user in the given ROLE would insert after the cursor position indicated by ^^^. Auto-correct the text.\n");
+                    systemMessageBuilder.push("RULES:\n");
+                    systemMessageBuilder.push("1. Reply with OK:, then in square brackets the predicted text, then END_INSERTION, and no other output.\n");
+                    systemMessageBuilder.push("2. When a specific value or quantity cannot be inferred and would need to be provided, use the word NEED_INFO.\n");
+                    systemMessageBuilder.push("3. If there isn't enough information to predict any words that the user would type next, just reply with the word NO_PREDICTION.\n");
+                    systemMessageBuilder.push("4. NEVER invent new information. If you can't be sure what the user is about to type, ALWAYS stop the prediction with END_INSERTION.\n");
+
+                    /*
+                    if (that.userPhrases.length) {
+                        systemMessageBuilder.push("\nAlways try to use variations on the following phrases as part of the predictions:\n");
+                        for (let i = 0; i < that.userPhrases.length; i++) {
+                            systemMessageBuilder.push("- {0}\n", that.userPhrases[i]);
+                        }
+                    }*/
 
-            this.input = this.element;
+                    systemMessageBuilder.push("\n\nROLE: " + "User" + " USER_TEXT: " + textBefore + textAfter + "^^^");
 
-            if (that.isMaterialized() && this.input instanceof HTMLInputElement) {
-                var children = this.host.children();
-                $.each(children, function (index) {
-                    var classToAdd = 'jqx-input-group-addon';
-                    $(this).removeClass(that.toThemeProperty('jqx-rc-all'));
-                    if (index === 0) {
-                        classToAdd += ' jqx-rc-l';
-                    }
-                    if (index === children.length - 1) {
-                        classToAdd += ' jqx-rc-r';
-                    }
-                    if (this !== that.element) {
-                        classToAdd += ' jqx-fill-state-normal';
-                    }
-                    this.className += ' ' + that.toThemeProperty(classToAdd);
-                });
+                    return systemMessageBuilder.join('\n');
+                }
 
-                var group = $("<div></div>");
-                group.addClass(that.toThemeProperty('jqx-input-group'));
-                this.host.after(group);
-                var input = this.element;
-                var data = this.host.data();
+                function fetchAIResponse(prompt, callback) {
+                    var apiKey = that.aiKey;  // Replace this with your OpenAI API key (don't expose it on public websites)
 
-                group.append(input);
-                var label = $("<label></label");
+                    var headers = {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Bearer ' + apiKey
+                    };
 
-                if (this.hint) {
-                    label[0].innerHTML = this.placeHolder;
-                }
+                    var body = JSON.stringify({
+                        model: "gpt-3.5-turbo", // or "gpt-4" if you have access
+                        messages: [{ role: "user", content: prompt }], // The conversation format
+                        //      stop_frequences: ["END_INSERTION", "NEED_INFO"],
+                        max_tokens: 200 // You can adjust token length based on your needs,
+                    });
 
-                label.addClass(that.toThemeProperty('jqx-input-label'));
-                group.append(label);
+                    var xhr = new XMLHttpRequest();
+                    xhr.open('POST', 'https://api.openai.com/v1/chat/completions', true);
+                    xhr.setRequestHeader('Content-Type', 'application/json');
+                    xhr.setRequestHeader('Authorization', 'Bearer ' + apiKey);
+
+                    xhr.onreadystatechange = function () {
+                        if (xhr.readyState === 4) {
+                            if (xhr.status === 200) {
+                                var response = JSON.parse(xhr.responseText);
+                                // Make sure there are choices and content in the response
+                                if (response.choices && response.choices.length > 0 && response.choices[0].message.content) {
+                                    var content = response.choices[0].message.content;
+
+                                    if (content.length > 5 && content.startsWith("OK")) {
+                                        content = content.substring(4);
+                                        content = content.replace('END_INSERTION', '');
+
+                                        var matches = content.match(/\[(.*?)\]/g);
+
+                                        // Remove the brackets from the extracted text
+                                        if (matches) {
+                                            // Use map to strip out brackets
+                                            var extractedText = matches.map(function (match) {
+                                                return match.replace(/^\[|\]$/g, '');
+                                            });
+
+                                            content = extractedText[0]
+                                        }
+
+                                        content = content.replace('[', '');
+                                        content = content.replace(']', '');
+                                    }
 
-                var bar = $("<span></span>");
-                group.append(bar);
-                bar.addClass(that.toThemeProperty('jqx-input-bar'));
+                                    if (content.indexOf('NO_PREDICTION') >= 0) {
+                                        content = '';
+                                    }
 
-                group[0].id = this.element.id;
-                this.element.removeAttribute('id');
+                                    callback(null, content);
+                                }
+                                else {
+                                    callback('Error: No valid response from AI', null);
+                                }
+                            } else {
+                                callback('Error fetching AI response: ' + xhr.statusText, null);
+                            }
+                        }
+                    };
 
-                group[0].style.cssText = this.element.style.cssText;
-                if (this.element.className.indexOf('underlined') >= 0) {
-                    group.addClass('underlined');
+                    xhr.send(body);
                 }
 
-                that.input = that.element;
-                if (!(this.input instanceof HTMLInputElement)) {
-                    this.input = this.host.find('input');
-                    if (this.input.length > 0) {
-                        this.input = this.input[0];
+                var textBefore = that.input.value.substring(0, that.input.selectionStart);
+                var textAfter = that.input.value.substring(that.input.selectionStart + 1);
+                var text = textBefore + textAfter;
+                if (text.endsWith(' ')) {
+                    var prompt = buildPrompt(textBefore, textAfter);
+                    fetchAIResponse(prompt.toString(), function (error, aiResponse) {
+                        if (error) {
+                            callback('');
+                        } else {
+                            callback(aiResponse);
+                        }
                     }
-                    $(this.input).addClass(this.toThemeProperty("jqx-input-widget"));
+                    );
                 }
-                this.label = label;
-                this.bar = bar;
-                this.element.style.cssText = '';
-                this.host = group;
-                this.element = group[0];
-                this.host.data(data);
+            },
 
+            render: function () {
                 var that = this;
 
-                if (that.template) {
-                    that.bar.addClass(that.toThemeProperty("jqx-" + that.template));
-                    that.label.addClass(that.toThemeProperty("jqx-" + that.template));
-                }
+                this.input = this.element;
 
-                if (children.length > 0) {
-                    that._hasAddons = true;
-                }
-            }
-            else if (this.element.nodeName.toLowerCase() === 'textarea') {
-                this.element.style.overflow = 'auto';
-            } else
-                if (this.element.nodeName.toLowerCase() === 'div') {
-                    this.baseHost = this.element;
-                    var input = that.element.getElementsByTagName('input');
-                    var hasTextInput = false;
-
-                    $.each(input, function () {
-                        var type = this.type;
-                        if (type == null || type === 'text' || type === 'textarea') {
-                            input = $(this);
-                            hasTextInput = true;
-                            return false;
+                if (that.isMaterialized() && this.input instanceof HTMLInputElement) {
+                    var children = this.host.children();
+                    $.each(children, function (index) {
+                        var classToAdd = 'jqx-input-group-addon';
+                        $(this).removeClass(that.toThemeProperty('jqx-rc-all'));
+                        if (index === 0) {
+                            classToAdd += ' jqx-rc-l';
                         }
+                        if (index === children.length - 1) {
+                            classToAdd += ' jqx-rc-r';
+                        }
+                        if (this !== that.element) {
+                            classToAdd += ' jqx-fill-state-normal';
+                        }
+                        this.className += ' ' + that.toThemeProperty(classToAdd);
                     });
-                    if (!hasTextInput) {
-                        throw new Error('jqxInput: Missing Text Input in the Input Group');
-                    }
-
-                    if (input.length > 0) {
-                        this.baseHost = $(this.element);
-                        that.baseElement = that.element;
-                        var data = this.host.data();
-                        this.host = input;
-                        this.element = input[0];
-                        that.input = input[0];
-                        this.host.data(data);
-                        that.baseElement.className += ' ' + that.toThemeProperty('jqx-widget jqx-rc-all jqx-input-group');
-                        var children = this.baseHost.children();
-                        $.each(children, function (index) {
-                            var classToAdd = 'jqx-input-group-addon';
-                            $(this).removeClass(that.toThemeProperty('jqx-rc-all'));
-                            if (index === 0) {
-                                classToAdd += ' jqx-rc-l';
-                            }
-                            if (index === children.length - 1) {
-                                classToAdd += ' jqx-rc-r';
-                            }
-                            if (this !== that.element) {
-                                classToAdd += ' jqx-fill-state-normal';
-                            }
-                            this.className += ' ' + that.toThemeProperty(classToAdd);
-                        });
+
+                    var group = $("<div></div>");
+                    group.addClass(that.toThemeProperty('jqx-input-group'));
+                    this.host.after(group);
+                    var input = this.element;
+                    var data = this.host.data();
+
+
+                    group.append(input);
+                    var label = $("<label></label");
+
+                    if (this.hint) {
+                        label[0].innerHTML = this.placeHolder;
                     }
-                }
 
-            this.addHandlers();
-            if (this.rtl) {
-                that.element.className += ' ' + that.toThemeProperty('jqx-rtl');
-            }
-            that.element.setAttribute('role', 'textbox');
-            $.jqx.aria(this, 'aria-autocomplete', 'both');
-            $.jqx.aria(this, 'aria-disabled', this.disabled);
-            $.jqx.aria(this, 'aria-readonly', false);
-            $.jqx.aria(this, 'aria-multiline', false);
-            if (this.source && this.source.length) {
-                $.jqx.aria(this, 'aria-haspopup', true);
-            }
-            if (this.value !== '') {
-                this.input.value = this.value;
-            }
+                    label.addClass(that.toThemeProperty('jqx-input-label'));
+                    group.append(label);
 
-            this._oldsource = this.source;
-            this._updateSource();
-        },
+                    var autoCompleteLabel = $("<label class='jqx-input-inline'></label");
+                    autoCompleteLabel[0].style.display = 'none';
+                    this._inlineLabel = autoCompleteLabel[0];
 
-        _updateSource: function () {
-            var that = this;
+                    group.append(autoCompleteLabel);
 
-            var mapItem = function (item) {
-                if (item === undefined) {
-                    return null;
-                }
 
-                if (typeof item === 'string' || item instanceof String) {
-                    return { label: item, value: item };
-                }
+                    var bar = $("<span></span>");
+                    group.append(bar);
+                    bar.addClass(that.toThemeProperty('jqx-input-bar'));
 
-                if (typeof item !== 'string' && item instanceof String === false) {
-                    var label = '';
-                    var value = '';
+                    group[0].id = this.element.id;
+                    this.element.removeAttribute('id');
 
-                    if (that.displayMember !== '' && that.displayMember !== undefined) {
-                        if (item[that.displayMember]) {
-                            label = item[that.displayMember];
-                        }
+                    group[0].style.cssText = this.element.style.cssText;
+                    if (this.element.className.indexOf('underlined') >= 0) {
+                        group.addClass('underlined');
                     }
 
-                    if (that.valueMember !== '' && that.valueMember !== undefined) {
-                        value = item[that.valueMember];
+                    that.input = that.element;
+                    if (!(this.input instanceof HTMLInputElement)) {
+                        this.input = this.host.find('input');
+                        if (this.input.length > 0) {
+                            this.input = this.input[0];
+                        }
+                        $(this.input).addClass(this.toThemeProperty("jqx-input-widget"));
                     }
+                    this.label = label;
+                    this.bar = bar;
+                    this.element.style.cssText = '';
+                    this.host = group;
+                    this.element = group[0];
+                    this.host.data(data);
 
-                    if (label === '') {
-                        label = item.label;
-                    }
-                    if (value === '') {
-                        value = item.value;
+                    var that = this;
+
+                    if (that.template) {
+                        that.bar.addClass(that.toThemeProperty("jqx-" + that.template));
+                        that.label.addClass(that.toThemeProperty("jqx-" + that.template));
                     }
 
-                    return { label: label, value: value };
+                    if (children.length > 0) {
+                        that._hasAddons = true;
+                    }
                 }
+                else if (this.element.nodeName.toLowerCase() === 'textarea') {
+                    this.element.style.overflow = 'auto';
+                } else
+                    if (this.element.nodeName.toLowerCase() === 'div') {
+                        this.baseHost = this.element;
+                        var input = that.element.getElementsByTagName('input');
+                        var hasTextInput = false;
 
-                return item;
-            };
-
-            var mapItems = function (source) {
-                var items = [];
-                for (var i = 0; i < source.length; i++) {
-                    items[i] = mapItem(source[i]);
-                }
-                return items;
-            };
+                        $.each(input, function () {
+                            var type = this.type;
+                            if (type == null || type === 'text' || type === 'textarea') {
+                                input = $(this);
+                                hasTextInput = true;
+                                return false;
+                            }
+                        });
+                        if (!hasTextInput) {
+                            throw new Error('jqxInput: Missing Text Input in the Input Group');
+                        }
 
-            if (this.source && this.source._source) {
-                this.adapter = this.source;
-                if (this.adapter._source.localdata != null) {
-                    this.adapter.unbindBindingUpdate(this.element.id);
-                    this.adapter.bindBindingUpdate(this.element.id, function () {
-                        that.source = mapItems(that.adapter.records);
-                    });
-                }
-                else {
-                    var postdata = {};
-                    if (this.adapter._options.data) {
-                        $.extend(that.adapter._options.data, postdata);
-                    }
-                    else {
-                        if (this.source._source.data) {
-                            $.extend(postdata, this.source._source.data);
+                        if (input.length > 0) {
+                            this.baseHost = $(this.element);
+                            that.baseElement = that.element;
+                            var data = this.host.data();
+                            this.host = input;
+                            this.element = input[0];
+                            that.input = input[0];
+                            this.host.data(data);
+                            that.baseElement.className += ' ' + that.toThemeProperty('jqx-widget jqx-rc-all jqx-input-group');
+                            var children = this.baseHost.children();
+                            $.each(children, function (index) {
+                                var classToAdd = 'jqx-input-group-addon';
+                                $(this).removeClass(that.toThemeProperty('jqx-rc-all'));
+                                if (index === 0) {
+                                    classToAdd += ' jqx-rc-l';
+                                }
+                                if (index === children.length - 1) {
+                                    classToAdd += ' jqx-rc-r';
+                                }
+                                if (this !== that.element) {
+                                    classToAdd += ' jqx-fill-state-normal';
+                                }
+                                this.className += ' ' + that.toThemeProperty(classToAdd);
+                            });
                         }
-                        this.adapter._options.data = postdata;
                     }
-                    this.adapter.unbindDownloadComplete(this.element.id);
-                    this.adapter.bindDownloadComplete(this.element.id, function () {
-                        that.source = mapItems(that.adapter.records);
-                    });
-                }
-                this.source.dataBind();
-                return;
-            }
-
-            if (!$.isFunction(this.source)) {
-                this.source = mapItems(this.source);
-            }
-        },
-
-        _refreshClasses: function (add) {
-            var func = add ? 'addClass' : 'removeClass',
-                hostClass = 'jqx-widget-content jqx-input-widget jqx-input jqx-widget',
-                popupClass = 'jqx-popup jqx-input-popup jqx-menu jqx-menu-vertical jqx-menu-dropdown jqx-widget jqx-widget-content';
-
-            if ($.jqx.browser.msie) {
-                popupClass += ' jqx-noshadow';
-            }
-            if (this.roundedCorners) {
-                hostClass += ' jqx-rc-all';
-                popupClass += ' jqx-rc-all';
-            }
-            if (this.disabled) {
-                hostClass += ' jqx-fill-state-disabled';
-            } else {
-                this.host.removeClass(this.toThemeProperty('jqx-fill-state-disabled'));
-            }
-            this.host[func](this.toThemeProperty(hostClass));
-            this._popupHelper[func](this.toThemeProperty(popupClass));
-        },
 
-        selectAll: function () {
-            var that = this;
-            var textbox = this.host;
+                this.addHandlers();
+                if (this.rtl) {
+                    that.element.className += ' ' + that.toThemeProperty('jqx-rtl');
+                }
 
-            if (textbox[0] instanceof HTMLInputElement === false) {
-                textbox = $(that.input);
-            }
+                that.input.setAttribute('autocomplete', 'off');
+                that.input.setAttribute('autocorrect', 'off');
+                that.input.setAttribute('spellcheck', false);
 
-            setTimeout(function () {
-                if ('selectionStart' in textbox[0]) {
-                    textbox[0].focus();
-                    textbox[0].setSelectionRange(0, textbox[0].value.length);
+                that.element.setAttribute('role', 'textbox');
+                $.jqx.aria(this, 'aria-autocomplete', 'both');
+                $.jqx.aria(this, 'aria-disabled', this.disabled);
+                $.jqx.aria(this, 'aria-readonly', false);
+                $.jqx.aria(this, 'aria-multiline', false);
+                if (this.source && this.source.length) {
+                    $.jqx.aria(this, 'aria-haspopup', true);
                 }
-                else {
-                    var range = textbox[0].createTextRange();
-                    range.collapse(true);
-                    range.moveEnd('character', textbox[0].value.length);
-                    range.moveStart('character', 0);
-                    range.select();
+                if (this.value !== '') {
+                    this.input.value = this.value;
                 }
-            }, 10);
-        },
 
-        selectLast: function () {
-            var that = this;
-            var textbox = this.host;
+                this._oldsource = this.source;
+                this._updateSource();
+            },
 
-            if (textbox[0] instanceof HTMLInputElement === false) {
-                textbox = $(that.input);
-            }
+            _updateSource: function () {
+                var that = this;
 
-            this.selectStart(textbox[0].value.length);
-        },
+                var mapItem = function (item) {
+                    if (item === undefined) {
+                        return null;
+                    }
 
-        selectFirst: function () {
-            //var textbox = this.host;
-            this.selectStart(0);
-        },
+                    if (typeof item === 'string' || item instanceof String) {
+                        return { label: item, value: item };
+                    }
 
-        selectStart: function (index) {
-            var that = this;
-            var textbox = this.host;
+                    if (typeof item !== 'string' && item instanceof String === false) {
+                        var label = '';
+                        var value = '';
 
-            if (textbox[0] instanceof HTMLInputElement === false) {
-                textbox = $(that.input);
-            }
+                        if (that.displayMember !== '' && that.displayMember !== undefined) {
+                            if (item[that.displayMember]) {
+                                label = item[that.displayMember];
+                            }
+                        }
 
-            setTimeout(function () {
-                if ('selectionStart' in textbox[0]) {
-                    textbox[0].focus();
-                    textbox[0].setSelectionRange(index, index);
-                }
-                else {
-                    var range = textbox[0].createTextRange();
-                    range.collapse(true);
-                    range.moveEnd('character', index);
-                    range.moveStart('character', index);
-                    range.select();
-                }
-            }, 10);
-        },
+                        if (that.valueMember !== '' && that.valueMember !== undefined) {
+                            value = item[that.valueMember];
+                        }
 
-        focus: function () {
-            try {
-                var that = this;
-                that.element.focus();
-                setTimeout(function () {
-                    that.element.focus();
-                }, 25);
+                        if (label === '') {
+                            label = item.label;
+                        }
+                        if (value === '') {
+                            value = item.value;
+                        }
 
-            }
-            catch (error) {
-            }
-        },
+                        return { label: label, value: value };
+                    }
 
-        resize: function (width, height) {
-            this.width = width;
-            this.height = height;
-            this.refresh();
-        },
+                    return item;
+                };
 
-        refresh: function () {
-            this._refreshClasses(false);
-            this._refreshClasses(true);
+                var mapItems = function (source) {
+                    var items = [];
+                    for (var i = 0; i < source.length; i++) {
+                        items[i] = mapItem(source[i]);
+                    }
+                    return items;
+                };
 
-            if (!this.baseHost) {
-                if (this.width != null && this.width.toString().indexOf("px") != -1) {
-                    this.element.style.width = parseInt(this.width) + 'px';
-                }
-                else if (this.width != undefined && !isNaN(this.width)) {
-                    this.element.style.width = this.width + 'px';
-                }
-                else {
-                    this.element.style.width = this.width;
+                if (this.source && this.source._source) {
+                    this.adapter = this.source;
+                    if (this.adapter._source.localdata != null) {
+                        this.adapter.unbindBindingUpdate(this.element.id);
+                        this.adapter.bindBindingUpdate(this.element.id, function () {
+                            that.source = mapItems(that.adapter.records);
+                        });
+                    }
+                    else {
+                        var postdata = {};
+                        if (this.adapter._options.data) {
+                            $.extend(that.adapter._options.data, postdata);
+                        }
+                        else {
+                            if (this.source._source.data) {
+                                $.extend(postdata, this.source._source.data);
+                            }
+                            this.adapter._options.data = postdata;
+                        }
+                        this.adapter.unbindDownloadComplete(this.element.id);
+                        this.adapter.bindDownloadComplete(this.element.id, function () {
+                            that.source = mapItems(that.adapter.records);
+                        });
+                    }
+                    this.source.dataBind();
+                    return;
                 }
 
-                if (this.height != null && this.height.toString().indexOf("px") != -1) {
-                    this.element.style.height = parseInt(this.height) + 'px';;
-                }
-                else if (this.height != undefined && !isNaN(this.height)) {
-                    this.element.style.height = this.height + 'px';
-                }
-                else {
-                    this.element.style.height = this.height;
+                if (!$.isFunction(this.source)) {
+                    this.source = mapItems(this.source);
                 }
-                if (this._hasAddons) {
-                    this._addonsWidth = 35;
-                    this.input.style.width = 'calc(100% - ' + this._addonsWidth + 'px)';
+            },
+
+            _refreshClasses: function (add) {
+                var func = add ? 'addClass' : 'removeClass',
+                    hostClass = 'jqx-widget-content jqx-input-widget jqx-input jqx-widget',
+                    popupClass = 'jqx-popup jqx-input-popup jqx-menu jqx-menu-vertical jqx-menu-dropdown jqx-widget jqx-widget-content';
+
+                if ($.jqx.browser.msie) {
+                    popupClass += ' jqx-noshadow';
                 }
-            } else {
-                if (this.width != null && this.width.toString().indexOf("px") != -1) {
-                    this.baseElement.style.width = parseInt(this.width) + 'px';
+                if (this.roundedCorners) {
+                    hostClass += ' jqx-rc-all';
+                    popupClass += ' jqx-rc-all';
                 }
-                else if (this.width != undefined && !isNaN(this.width)) {
-                    this.baseElement.style.width = this.width + 'px';
+                if (this.disabled) {
+                    hostClass += ' jqx-fill-state-disabled';
+                } else {
+                    this.host.removeClass(this.toThemeProperty('jqx-fill-state-disabled'));
                 }
+                this.host[func](this.toThemeProperty(hostClass));
+                this._popupHelper[func](this.toThemeProperty(popupClass));
+            },
 
-                if (this.height != null && this.height.toString().indexOf("px") != -1) {
-                    this.baseElement.style.height = parseInt(this.height) + 'px';
+            selectAll: function () {
+                var that = this;
+                var textbox = this.host;
+
+                if (textbox[0] instanceof HTMLInputElement === false) {
+                    textbox = $(that.input);
                 }
-                else if (this.height != undefined && !isNaN(this.height)) {
-                    this.baseElement.style.height = this.height + 'px';
-                };
-                var that = this,
-                    IE8 = $.jqx.browser.msie && $.jqx.browser.version < 9,
-                    totalWidth = 0;
-                $.each(this.baseHost.children(), function () {
-                    this.style.height = '100%';
-                    if (this !== that.element) {
-                        totalWidth += $(this).outerWidth();
+
+                setTimeout(function () {
+                    if ('selectionStart' in textbox[0]) {
+                        textbox[0].focus();
+                        textbox[0].setSelectionRange(0, textbox[0].value.length);
                     }
-                });
-                that._addonsWidth = totalWidth;
-                if (IE8) {
-                    var height = Math.max(0, that.baseElement.offsetHeight - 2);
-                    that.element.style.width = Math.max(0, (that.baseElement.offsetWidth - totalWidth - 1)) + 'px';
-                    that.element.style.minHeight = height + 'px';
-                    that.element.style.lineHeight = height + 'px';
-                } else {
-                    that.element.style.width = 'calc(100% - ' + totalWidth + 'px)';
-                }
-                $.jqx.utilities.resize(that.baseHost, function () {
-                    if (IE8 && typeof that.width === 'string' && that.width.indexOf('%') !== -1 && !that._initiallyHidden) {
-                        that.element.style.width = (that.baseElement.offsetWidth - that._addonsWidth - 1) + 'px';
-                    } else if (that._initiallyHidden) {
-                        that._addonsWidth = that._getAddonsWidth();
-                        if (!IE8) {
-                            that.element.style.width = 'calc(100% - ' + that._addonsWidth + 'px)';
-                        } else {
-                            that.element.style.width = (that.baseElement.offsetWidth - that._addonsWidth - 1) + 'px';
-                            var height = that.baseElement.offsetHeight - 2;
-                            that.element.style.minHeight = height + 'px';
-                            that.element.style.lineHeight = height + 'px';
-                        }
-                        that._initiallyHidden = false;
+                    else {
+                        var range = textbox[0].createTextRange();
+                        range.collapse(true);
+                        range.moveEnd('character', textbox[0].value.length);
+                        range.moveStart('character', 0);
+                        range.select();
                     }
-                });
-            }
+                }, 10);
+            },
 
-            if (this.disabled) {
-                this.element.setAttribute('disabled', true);
-            } else {
-                this.element.removeAttribute('disabled');
-            }
-            if (this.maxLength) {
-                this.element.setAttribute('maxlength', this.maxLength);
+            selectLast: function () {
+                var that = this;
+                var textbox = this.host;
 
-                if (this.input) {
-                    this.input.setAttribute('maxlength', this.maxLength);
+                if (textbox[0] instanceof HTMLInputElement === false) {
+                    textbox = $(that.input);
                 }
-            }
 
-            if (!this.element.getAttribute('placeholder')) {
-                this._refreshPlaceHolder();
-            }
-        },
+                this.selectStart(textbox[0].value.length);
+            },
 
-        _refreshPlaceHolder: function () {
-            var that = this;
+            selectFirst: function () {
+                //var textbox = this.host;
+                this.selectStart(0);
+            },
 
-            if (!that.isMaterialized() || !that.hint) {
-                if ('placeholder' in this.input && !($.jqx.browser.msie && $.jqx.browser.version < 9)) {
-                    that.input.setAttribute('placeHolder', that.placeHolder);
-                } else {
-                    if (that.input.value === '') {
-                        that.input.value = that.placeHolder;
-                    }
+            selectStart: function (index) {
+                var that = this;
+                var textbox = this.host;
+
+                if (textbox[0] instanceof HTMLInputElement === false) {
+                    textbox = $(that.input);
                 }
-            }
 
-            if (!that.hint) {
-                return;
-            }
+                setTimeout(function () {
+                    if ('selectionStart' in textbox[0]) {
+                        textbox[0].focus();
+                        textbox[0].setSelectionRange(index, index);
+                    }
+                    else {
+                        var range = textbox[0].createTextRange();
+                        range.collapse(true);
+                        range.moveEnd('character', index);
+                        range.moveStart('character', index);
+                        range.select();
+                    }
+                }, 10);
+            },
 
-            if (that.input.value !== "") {
-                that.element.setAttribute("hint", true);
-            }
-            else {
-                that.element.removeAttribute("hint");
-            }
+            focus: function () {
+                try {
+                    var that = this;
+                    that.element.focus();
+                    setTimeout(function () {
+                        that.element.focus();
+                    }, 25);
 
-            if (that.label) {
-                that.label.innerHTML = that.placeHolder;
-            }
-        },
+                }
+                catch (error) {
+                }
+            },
 
-        destroy: function () {
-            this.removeHandlers();
-            if (this.baseHost) {
-                this.baseHost.remove();
-            } else {
-                this.host.remove();
-            }
-            if (this.$popup) {
-                this._popupHelper.remove();
-            }
-        },
+            resize: function (width, height) {
+                this.width = width;
+                this.height = height;
+                this.refresh();
+            },
 
-        propertiesChangedHandler: function (object, key, value) {
-            if (value.width && value.height && Object.keys(value).length === 2) {
-                object.refresh();
-            }
-        },
+            refresh: function () {
+                this._refreshClasses(false);
+                this._refreshClasses(true);
 
-        propertyChangedHandler: function (object, key, oldvalue, value) {
-            if (key === 'width' && value !== oldvalue) {
-                if (object.baseHost) {
-                    object.baseElement.style.width = object._toPx(value);
-                    if ($.jqx.browser.msie && $.jqx.browser.version < 9) {
-                        object.element.style.width = (object.baseElement.offsetWidth - object._addonsWidth - 1) + 'px';
+                if (!this.baseHost) {
+                    if (this.width != null && this.width.toString().indexOf("px") != -1) {
+                        this.element.style.width = parseInt(this.width) + 'px';
+                    }
+                    else if (this.width != undefined && !isNaN(this.width)) {
+                        this.element.style.width = this.width + 'px';
+                    }
+                    else {
+                        this.element.style.width = this.width;
+                    }
+
+                    if (this.height != null && this.height.toString().indexOf("px") != -1) {
+                        this.element.style.height = parseInt(this.height) + 'px';;
+                    }
+                    else if (this.height != undefined && !isNaN(this.height)) {
+                        this.element.style.height = this.height + 'px';
+                    }
+                    else {
+                        this.element.style.height = this.height;
+                    }
+                    if (this._hasAddons) {
+                        this._addonsWidth = 35;
+                        this.input.style.width = 'calc(100% - ' + this._addonsWidth + 'px)';
                     }
                 } else {
-                    object.element.style.width = object._toPx(value);
+                    if (this.width != null && this.width.toString().indexOf("px") != -1) {
+                        this.baseElement.style.width = parseInt(this.width) + 'px';
+                    }
+                    else if (this.width != undefined && !isNaN(this.width)) {
+                        this.baseElement.style.width = this.width + 'px';
+                    }
+
+                    if (this.height != null && this.height.toString().indexOf("px") != -1) {
+                        this.baseElement.style.height = parseInt(this.height) + 'px';
+                    }
+                    else if (this.height != undefined && !isNaN(this.height)) {
+                        this.baseElement.style.height = this.height + 'px';
+                    };
+                    var that = this,
+                        IE8 = $.jqx.browser.msie && $.jqx.browser.version < 9,
+                        totalWidth = 0;
+                    $.each(this.baseHost.children(), function () {
+                        this.style.height = '100%';
+                        if (this !== that.element) {
+                            totalWidth += $(this).outerWidth();
+                        }
+                    });
+                    that._addonsWidth = totalWidth;
+                    if (IE8) {
+                        var height = Math.max(0, that.baseElement.offsetHeight - 2);
+                        that.element.style.width = Math.max(0, (that.baseElement.offsetWidth - totalWidth - 1)) + 'px';
+                        that.element.style.minHeight = height + 'px';
+                        that.element.style.lineHeight = height + 'px';
+                    } else {
+                        that.element.style.width = 'calc(100% - ' + totalWidth + 'px)';
+                    }
+                    $.jqx.utilities.resize(that.baseHost, function () {
+                        if (IE8 && typeof that.width === 'string' && that.width.indexOf('%') !== -1 && !that._initiallyHidden) {
+                            that.element.style.width = (that.baseElement.offsetWidth - that._addonsWidth - 1) + 'px';
+                        } else if (that._initiallyHidden) {
+                            that._addonsWidth = that._getAddonsWidth();
+                            if (!IE8) {
+                                that.element.style.width = 'calc(100% - ' + that._addonsWidth + 'px)';
+                            } else {
+                                that.element.style.width = (that.baseElement.offsetWidth - that._addonsWidth - 1) + 'px';
+                                var height = that.baseElement.offsetHeight - 2;
+                                that.element.style.minHeight = height + 'px';
+                                that.element.style.lineHeight = height + 'px';
+                            }
+                            that._initiallyHidden = false;
+                        }
+                    });
                 }
-                return;
-            }
 
-            if (key === 'placeHolder') {
-                if ((!('placeholder' in object.element) || ($.jqx.browser.msie && $.jqx.browser.version < 9)) && object.input.value === oldvalue) {
-                    object.input.value = '';
+                if (this.disabled) {
+                    this.element.setAttribute('disabled', true);
+                } else {
+                    this.element.removeAttribute('disabled');
                 }
-                object._refreshPlaceHolder();
-                return;
-            }
+                if (this.maxLength) {
+                    this.element.setAttribute('maxlength', this.maxLength);
 
-            if (object.batchUpdate && object.batchUpdate.width && object.batchUpdate.height && Object.keys(object.batchUpdate).length === 2) {
-                return;
-            }
+                    if (this.input) {
+                        this.input.setAttribute('maxlength', this.maxLength);
+                    }
+                }
 
-            if (key === 'theme') {
-                $.jqx.utilities.setTheme(oldvalue, value, object.host);
-            }
+                if (!this.element.getAttribute('placeholder')) {
+                    this._refreshPlaceHolder();
+                }
+            },
 
-            if (key === 'opened') {
-                if (value) {
-                    object.open();
-                } else {
-                    object.close();
+            _refreshPlaceHolder: function () {
+                var that = this;
+
+                if (!that.isMaterialized() || !that.hint) {
+
+                    if ('placeholder' in this.input && !($.jqx.browser.msie && $.jqx.browser.version < 9)) {
+                        that.input.setAttribute('placeHolder', that.placeHolder);
+                    } else {
+                        if (that.input.value === '') {
+                            that.input.value = that.placeHolder;
+                        }
+                    }
                 }
-                return;
-            }
-            if (key === 'source') {
-                object._oldsource = value;
-                object._updateSource();
-            }
-            if (key === 'displayMember' || key === 'valueMember') {
-                object.source = object._oldsource;
-                object._updateSource();
-            }
-            if (key === 'disabled') {
-                $.jqx.aria(object, 'aria-disabled', object.disabled);
-            }
 
-            if (key === 'value') {
-                object.input.value = value;
-                object._refreshPlaceHolder();
-            }
+                if (!that.hint) {
+                    return;
+                }
 
-            object.refresh();
-        },
+                if (that.input.value !== "") {
+                    that.element.setAttribute("hint", true);
+                }
+                else {
+                    that.element.removeAttribute("hint");
+                }
 
-        select: function (event, ui, changeType) {
-            var selectedItem = this._find('jqx-fill-state-pressed', this._popupHelper);
-            var val = selectedItem.getAttribute('data-value');
-            var label = selectedItem.getAttribute('data-name');
-            this.input.value = this.renderer(label, this.input.value);
-            this.selectedItem = { 'label': label, 'value': val };
-            this.element.setAttribute('data-value', val);
-            this.element.setAttribute('data-label', label);
-            this._raiseEvent('0', { 'item': { 'label': label, 'value': val }, 'label': label, 'value': val });
-            this._raiseEvent('3', { type: changeType, 'item': { 'label': label, 'value': val }, 'label': label, 'value': val });
-            this.value = label;
-            return this.close();
-        },
+                if (that.label) {
+                    that.label.innerHTML = that.placeHolder;
+                }
+
+                if (this._inlineLabel && that.inlineAutoComplete) {
+                    this._inlineLabel.style.display = 'none';
+                    that.host.css('overflow', 'visible');
+                }
+
+            },
+
+            destroy: function () {
+                this.removeHandlers();
+                if (this.baseHost) {
+                    this.baseHost.remove();
+                } else {
+                    this.host.remove();
+                }
+                if (this.$popup) {
+                    this._popupHelper.remove();
+                }
+            },
 
-        val: function (value) {
-            if (arguments.length === 0 || (value != null && typeof (value) === 'object' && !value.label && !value.value)) {
-                if (this.displayMember !== '' && this.valueMember !== '' && this.selectedItem) {
-                    if (this.input.value === '') {
-                        return '';
+            propertiesChangedHandler: function (object, key, value) {
+                if (value.width && value.height && Object.keys(value).length === 2) {
+                    object.refresh();
+                }
+            },
+
+            propertyChangedHandler: function (object, key, oldvalue, value) {
+                if (key === 'width' && value !== oldvalue) {
+                    if (object.baseHost) {
+                        object.baseElement.style.width = object._toPx(value);
+                        if ($.jqx.browser.msie && $.jqx.browser.version < 9) {
+                            object.element.style.width = (object.baseElement.offsetWidth - object._addonsWidth - 1) + 'px';
+                        }
+                    } else {
+                        object.element.style.width = object._toPx(value);
                     }
-                    return this.selectedItem;
+                    return;
                 }
 
-                return this.input.value;
-            }
+                if (key === 'placeHolder') {
+                    if ((!('placeholder' in object.element) || ($.jqx.browser.msie && $.jqx.browser.version < 9)) && object.input.value === oldvalue) {
+                        object.input.value = '';
+                    }
+                    object._refreshPlaceHolder();
+                    return;
+                }
 
-            if (value && value.label) {
-                this.selectedItem = { 'label': value.label, 'value': value.value };
-                this.element.setAttribute('data-value', value.value);
-                this.element.setAttribute('data-label', value.label);
-                this.value = value;
-                this.input.value = value.label;
-                if (this.input) {
-                    this.input.value = value.label;
+                if (object.batchUpdate && object.batchUpdate.width && object.batchUpdate.height && Object.keys(object.batchUpdate).length === 2) {
+                    return;
                 }
-                return this.input.value;
-            }
 
-            this.value = value;
-            this.input.value = value;
+                if (key === 'theme') {
+                    $.jqx.utilities.setTheme(oldvalue, value, object.host);
+                }
 
-            this.element.setAttribute('data-value', value);
-            this.element.setAttribute('data-label', value);
-            if (value && value.label) {
-                this._raiseEvent('3', { type: null, 'item': { 'label': value.label, 'value': value.value }, 'label': value.label, 'value': value.value });
-            }
-            else {
-                this._raiseEvent('3', { type: null, 'item': { 'label': value, 'value': value }, 'label': value, 'value': value });
-            }
-            this._refreshPlaceHolder();
-            return this.input.value;
-        },
+                if (key === 'opened') {
+                    if (value) {
+                        object.open();
+                    } else {
+                        object.close();
+                    }
+                    return;
+                }
+                if (key === 'source') {
+                    object._oldsource = value;
+                    object._updateSource();
+                }
+                if (key === 'displayMember' || key === 'valueMember') {
+                    object.source = object._oldsource;
+                    object._updateSource();
+                }
+                if (key === 'disabled') {
+                    $.jqx.aria(object, 'aria-disabled', object.disabled);
+                }
 
-        _raiseEvent: function (id, arg) {
-            if (arg === undefined) {
-                arg = { owner: null };
-            }
+                if (key === 'value') {
+                    object.input.value = value;
+                    object._refreshPlaceHolder();
+                }
 
-            var evt = this.events[id];
-            arg.owner = this;
+                object.refresh();
+            },
 
-            var event = new $.Event(evt);
-            event.owner = this;
-            event.args = arg;
-            if (event.preventDefault) {
-                event.preventDefault();
-            }
+            select: function (event, ui, changeType) {
+                var that = this;
+                var selectedItem = this._find('jqx-fill-state-pressed', this._popupHelper);
+
+                if (this.inlineAutoComplete) {
+                    selectedItem = this.element.querySelector('.jqx-input-inline');
+                    selectedItem.style.display = 'none';
+                    that.host.css('overflow', 'visible');
+                }
+
+                var val = selectedItem.getAttribute('data-value');
+                var label = selectedItem.getAttribute('data-name');
+                this.input.value = this.renderer(label, this.input.value);
+                this.selectedItem = { 'label': label, 'value': val };
+                this.element.setAttribute('data-value', val);
+                this.element.setAttribute('data-label', label);
+                this._raiseEvent('0', { 'item': { 'label': label, 'value': val }, 'label': label, 'value': val });
+                this._raiseEvent('3', { type: changeType, 'item': { 'label': label, 'value': val }, 'label': label, 'value': val });
+                this.value = label;
+                return this.close();
+            },
 
-            var result = this.host.trigger(event);
-            return result;
-        },
+            val: function (value) {
+                if (arguments.length === 0 || (value != null && typeof (value) === 'object' && !value.label && !value.value)) {
+                    if (this.displayMember !== '' && this.valueMember !== '' && this.selectedItem) {
+                        if (this.input.value === '') {
+                            return '';
+                        }
+                        return this.selectedItem;
+                    }
 
-        _renderer: function (item) {
-            return item;
-        },
+                    return this.input.value;
+                }
 
-        open: function () {
-            if ($.jqx.isHidden(this.host)) {
-                return;
-            }
+                if (value && value.label) {
+                    this.selectedItem = { 'label': value.label, 'value': value.value };
+                    this.element.setAttribute('data-value', value.value);
+                    this.element.setAttribute('data-label', value.label);
+                    this.value = value;
+                    this.input.value = value.label;
+                    if (this.input) {
+                        this.input.value = value.label;
+                    }
+                    return this.input.value;
+                }
 
-            var position = $.extend({}, this.host.coord(true), {
-                height: this.element.offsetHeight
-            });
+                this.value = value;
+                this.input.value = value;
 
-            if (this.$popup.parentNode !== document.body) {
-                var popupId = this.element.id + '_popup';
-                this.$popup.id = popupId;
-                $.jqx.aria(this, 'aria-owns', popupId);
-                document.body.appendChild(this.$popup);
-            }
+                this.element.setAttribute('data-value', value);
+                this.element.setAttribute('data-label', value);
+                if (value && value.label) {
+                    this._raiseEvent('3', { type: null, 'item': { 'label': value.label, 'value': value.value }, 'label': value.label, 'value': value.value });
+                }
+                else {
+                    this._raiseEvent('3', { type: null, 'item': { 'label': value, 'value': value }, 'label': value, 'value': value });
+                }
+                this._refreshPlaceHolder();
+                return this.input.value;
+            },
 
-            this.$popup.style.position = 'absolute';
-            this.$popup.style.zIndex = this.popupZIndex;
-            this.$popup.style.top = this._toPx(position.top + position.height);
-            this.$popup.style.left = this._toPx(position.left);
-            this.$popup.style.display = 'block';
+            _raiseEvent: function (id, arg) {
+                if (arg === undefined) {
+                    arg = { owner: null };
+                }
 
-            var height = 0;
-            var children = this._popupHelper.children();
-            $.each(children, function () {
-                height += $(this).outerHeight() + 1;
-            });
-            this.$popup.style.height = this._toPx(height);
+                var evt = this.events[id];
+                arg.owner = this;
 
-            if (this.enableBrowserBoundsDetection) {
-                var viewHeight = $(window).height() + $(window).scrollTop();
-                var offset = $(this.$popup).offset();
-                var dpHeight = $(this.$popup).outerHeight();
+                var event = new $.Event(evt);
+                event.owner = this;
+                event.args = arg;
+                if (event.preventDefault) {
+                    event.preventDefault();
+                }
 
-                if (offset.top + dpHeight > viewHeight) {
-                    var newPosition = position.top + position.height - dpHeight - this.host.height();
-                    if (newPosition < 0) {
-                        newPosition = 0;
-                    }
-                    this.$popup.style.top = newPosition + 'px';
+                var result = this.host.trigger(event);
+                return result;
+            },
+
+            _renderer: function (item) {
+                return item;
+            },
+
+            open: function () {
+                if ($.jqx.isHidden(this.host)) {
+                    return;
                 }
-            }
 
-            this.opened = true;
-            this._raiseEvent('1', { popup: this.$popup });
-            $.jqx.aria(this, 'aria-expanded', true);
-            return this;
-        },
+                var position = $.extend({}, this.host.coord(true), {
+                    height: this.element.offsetHeight
+                });
 
-        close: function () {
-            if (!this.opened) {
-                return;
-            }
+                if (this.$popup.parentNode !== document.body) {
+                    var popupId = this.element.id + '_popup';
+                    this.$popup.id = popupId;
+                    $.jqx.aria(this, 'aria-owns', popupId);
+                    document.body.appendChild(this.$popup);
+                }
 
-            this.$popup.style.display = 'none';
-            this.opened = false;
-            this._raiseEvent('2', { popup: this.$popup });
-            $.jqx.aria(this, 'aria-expanded', false);
-            this._refreshPlaceHolder();
-            return this;
-        },
+                this.$popup.style.position = 'absolute';
+                this.$popup.style.zIndex = this.popupZIndex;
+                this.$popup.style.top = this._toPx(position.top + position.height);
+                this.$popup.style.left = this._toPx(position.left);
+                this.$popup.style.display = 'block';
 
-        suggest: function () {
-            var items;
-            this.query = this.input.value;
+                var height = 0;
+                var children = this._popupHelper.children();
+                $.each(children, function () {
+                    height += $(this).outerHeight() + 1;
+                });
+                this.$popup.style.height = this._toPx(height);
 
-            if (!this.query || this.query.length < this.minLength) {
-                return this.opened ? this.close() : this;
-            }
+                if (this.enableBrowserBoundsDetection) {
+                    var viewHeight = $(window).height() + $(window).scrollTop();
+                    var offset = $(this.$popup).offset();
+                    var dpHeight = $(this.$popup).outerHeight();
+
+                    if (offset.top + dpHeight > viewHeight) {
+                        var newPosition = position.top + position.height - dpHeight - this.host.height();
+                        if (newPosition < 0) {
+                            newPosition = 0;
+                        }
+                        this.$popup.style.top = newPosition + 'px';
+                    }
+                }
 
-            if ($.isFunction(this.source)) {
-                items = this.source(this.query, $.proxy(this.load, this));
-            }
-            else {
-                items = this.source;
-            }
+                this.opened = true;
+                this._raiseEvent('1', { popup: this.$popup });
+                $.jqx.aria(this, 'aria-expanded', true);
+                return this;
+            },
 
-            if (items) {
-                return this.load(items);
-            }
+            close: function () {
+                if (this._inlineLabel) {
+                    this._inlineLabel.style.display = 'none';
+                }
 
-            return this;
-        },
+                if (!this.opened) {
+                    return;
+                }
 
-        load: function (originalItems) {
-            var that = this,
-                items = [];
+                this.$popup.style.display = 'none';
+                this.opened = false;
+                this._raiseEvent('2', { popup: this.$popup });
+                $.jqx.aria(this, 'aria-expanded', false);
+                this._refreshPlaceHolder();
+                return this;
+            },
 
-            for (var i = 0; i < originalItems.length; i++) {
-                var item = originalItems[i];
-                if (that.filter(item)) {
-                    items.push(item);
+            suggest: function () {
+                var items;
+                var that = this;
+                this.query = this.input.value;
+
+                if (that.inlineAutoComplete && that.aiKey) {
+                    this.load([]);
+                    return;
                 }
-            }
+                if (!this.query || this.query.length < this.minLength) {
+                    if (this._inlineLabel) {
+                        this._inlineLabel.style.display = 'none';
+                    }
 
-            items = this.sort(items);
+                    return this.opened ? this.close() : this;
+                }
 
-            if (!items.length) {
-                if (this.opened) {
-                    return this.close();
+                if ($.isFunction(this.source)) {
+                    items = this.source(this.query, $.proxy(this.load, this));
                 }
                 else {
-                    return this;
+                    items = this.source;
                 }
-            }
 
-            return this._render(items.slice(0, this.items)).open();
-        },
+                if (items) {
+                    return this.load(items);
+                }
 
-        _filter: function (item) {
-            var value = this.query;
-            var itemValue = item;
-            if (item.label != null) {
-                itemValue = item.label;
-            }
-            else if (this.displayMember) {
-                itemValue = item[this.displayMember];
-            }
+                return this;
+            },
 
-            switch (this.searchMode) {
-                case 'none':
-                    break;
-                default: // ('containsignorecase')
-                    return $.jqx.string.containsIgnoreCase(itemValue, value);
-                case 'contains':
-                    return $.jqx.string.contains(itemValue, value);
-                case 'equals':
-                    return $.jqx.string.equals(itemValue, value);
-                case 'equalsignorecase':
-                    return $.jqx.string.equalsIgnoreCase(itemValue, value);
-                case 'startswith':
-                    return $.jqx.string.startsWith(itemValue, value);
-                case 'startswithignorecase':
-                    return $.jqx.string.startsWithIgnoreCase(itemValue, value);
-                case 'endswith':
-                    return $.jqx.string.endsWith(itemValue, value);
-                case 'endswithignorecase':
-                    return $.jqx.string.endsWithIgnoreCase(itemValue, value);
-            }
-        },
+            load: function (originalItems) {
+                var that = this,
+                    items = [];
 
-        _sort: function (items) {
-            var bw = [], cs = [], cis = [];
+                var searchMode = this.searchMode;
+                if (this.inlineAutoComplete) {
+                    this.searchMode = 'startswith';
+                }
 
-            for (var i = 0; i < items.length; i++) {
-                var item = items[i];
+                for (var i = 0; i < originalItems.length; i++) {
+                    var item = originalItems[i];
+                    if (that.filter(item)) {
+                        items.push(item);
+                    }
+                }
+
+                items = this.sort(items);
+
+                if (!items.length) {
+                    if (this.inlineAutoComplete) {
+                        var labelElement = this.element.querySelector('.jqx-input-inline');
+                        labelElement.style.display = 'none';
+                        that.host.css('overflow', 'visible');
+
+                        if (that._writeTimer) {
+                            clearTimeout(that._writeTimer);
+                        }
+                        that._writeTimer = setTimeout(function () {
+                            that.getAISuggestions(function (suggestion) {
+                                if (suggestion) {
+                                    suggestion = that.input.value + suggestion;
+                                    labelElement.textContent = suggestion;
+                                    labelElement.setAttribute('data-value', suggestion);
+                                    labelElement.setAttribute('data-name', suggestion);
+                                    labelElement.style.opacity = 0.5;
+                                    labelElement.style.position = 'absolute';
+                                    labelElement.style.zIndex = 5;
+                                    labelElement.style.display = '';
+                                    labelElement.style.left = '6px';
+                                    labelElement.style.lineHeight = that.height + 'px';
+                                    that.host.css('overflow', 'hidden');
+                                    that.searchMode = searchMode;
+                                }
+                            });
+                        }, 500);
+                    }
 
+                    if (this.opened) {
+                        return this.close();
+                    }
+                    else {
+                        return this;
+                    }
+                }
+
+                if (this.inlineAutoComplete) {
+                    var item = items.length ? items[0] : '';
+                    var label = typeof item === 'string' ? item : item.label;
+                    var value = typeof item === 'string' ? item : item.value;
+                    var labelElement = this.element.querySelector('.jqx-input-inline');
+                    labelElement.textContent = label;
+                    labelElement.setAttribute('data-value', value);
+                    labelElement.setAttribute('data-name', label);
+                    labelElement.style.opacity = 0.5;
+                    labelElement.style.position = 'absolute';
+                    labelElement.style.zIndex = 5;
+                    labelElement.style.display = '';
+                    labelElement.style.left = '6px';
+                    labelElement.style.lineHeight = that.height + 'px';
+                    this.searchMode = searchMode;
+                    that.host.css('overflow', 'hidden');
+
+                    this.getAISuggestions(function (suggestion) {
+                        if (suggestion) {
+                            labelElement.textContent = suggestion;
+                        }
+                    });
+                    return;
+                }
+                return this._render(items.slice(0, this.items)).open();
+            },
+
+            _filter: function (item) {
+                var value = this.query;
                 var itemValue = item;
-                if (item.label) {
+                if (item.label != null) {
                     itemValue = item.label;
                 }
                 else if (this.displayMember) {
                     itemValue = item[this.displayMember];
                 }
 
-                if (itemValue.toString().toLowerCase().indexOf(this.query.toString().toLowerCase()) === 0) {
-                    bw.push(item);
-                }
-                else if (itemValue.toString().indexOf(this.query) >= 0) {
-                    cs.push(item);
-                }
-                else if (itemValue.toString().toLowerCase().indexOf(this.query.toString().toLowerCase()) >= 0) {
-                    cis.push(item);
+                switch (this.searchMode) {
+                    case 'none':
+                        break;
+                    default: // ('containsignorecase')
+                        return $.jqx.string.containsIgnoreCase(itemValue, value);
+                    case 'contains':
+                        return $.jqx.string.contains(itemValue, value);
+                    case 'equals':
+                        return $.jqx.string.equals(itemValue, value);
+                    case 'equalsignorecase':
+                        return $.jqx.string.equalsIgnoreCase(itemValue, value);
+                    case 'startswith':
+                        return $.jqx.string.startsWith(itemValue, value);
+                    case 'startswithignorecase':
+                        return $.jqx.string.startsWithIgnoreCase(itemValue, value);
+                    case 'endswith':
+                        return $.jqx.string.endsWith(itemValue, value);
+                    case 'endswithignorecase':
+                        return $.jqx.string.endsWithIgnoreCase(itemValue, value);
                 }
-            }
+            },
 
-            return bw.concat(cs, cis);
-        },
+            _sort: function (items) {
+                var bw = [], cs = [], cis = [];
 
-        _highlight: function (item) {
-            var query = this.query;
-            query = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+                for (var i = 0; i < items.length; i++) {
+                    var item = items[i];
 
-            var regex = new RegExp('(' + query + ')', 'ig');
-            return item.replace(regex, function ($1, match) {
-                return '<b>' + match + '</b>';
-            });
-        },
+                    var itemValue = item;
+                    if (item.label) {
+                        itemValue = item.label;
+                    }
+                    else if (this.displayMember) {
+                        itemValue = item[this.displayMember];
+                    }
 
-        escapeHTML: function (value) {
-            var entityMap = {
-                '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;', '/': '&#x2F;', '`': '&#x60;', '=': '&#x3D;'
-            };
+                    if (itemValue.toString().toLowerCase().indexOf(this.query.toString().toLowerCase()) === 0) {
+                        bw.push(item);
+                    }
+                    else if (itemValue.toString().indexOf(this.query) >= 0) {
+                        cs.push(item);
+                    }
+                    else if (itemValue.toString().toLowerCase().indexOf(this.query.toString().toLowerCase()) >= 0) {
+                        cis.push(item);
+                    }
+                }
 
-            return String(value).replace(/[&<>"'`=\/]/g, function (s) { return entityMap[s] });
-        },
+                return bw.concat(cs, cis);
+            },
 
-        sanitizeHTML: function (value) {
-            var that = this;
-            var regExp = new RegExp('<\s*(applet|audio|base|bgsound|embed|form|iframe|isindex|keygen|layout|link|meta|object|script|svg|style|template|video)[^>]*>(.*?)<\s*/\s*(applet|audio|base|bgsound|embed|form|iframe|isindex|keygen|layout|link|meta|object|script|svg|style|template|video)>', 'ig');
-            var result = String(value).replace(regExp, function (s) { return that.escapeHTML(s) });
+            _highlight: function (item) {
+                var query = this.query;
+                query = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
 
-            return result;
-        },
+                var regex = new RegExp('(' + query + ')', 'ig');
+                return item.replace(regex, function ($1, match) {
+                    return '<b>' + match + '</b>';
+                });
+            },
 
-        escape_HTML: function (html_str) {
-            if (html_str && (html_str.indexOf('onclick') >= 0 || html_str.indexOf('onload') >= 0 || html_str.indexOf('onerror') >= 0)) {
-                return this.escapeHTML(html_str)
-            }
+            escapeHTML: function (value) {
+                var entityMap = {
+                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;', '/': '&#x2F;', '`': '&#x60;', '=': '&#x3D;'
+                };
 
-            var sanitized = this.sanitizeHTML(html_str);
+                return String(value).replace(/[&<>"'`=\/]/g, function (s) { return entityMap[s] });
+            },
 
-            return sanitized;
-        },
+            sanitizeHTML: function (value) {
+                var that = this;
+                var regExp = new RegExp('<\s*(applet|audio|base|bgsound|embed|form|iframe|isindex|keygen|layout|link|meta|object|script|svg|style|template|video)[^>]*>(.*?)<\s*/\s*(applet|audio|base|bgsound|embed|form|iframe|isindex|keygen|layout|link|meta|object|script|svg|style|template|video)>', 'ig');
+                var result = String(value).replace(regExp, function (s) { return that.escapeHTML(s) });
 
-        _render: function (originalItems) {
-            var that = this,
-                popupChildren = that._popupHelper.children();
+                return result;
+            },
 
-            if (popupChildren.length > 0) {
-                for (var j = 0; j < popupChildren.length; j++) {
-                    $(popupChildren[j]).remove();
+            escape_HTML: function (html_str) {
+                if (html_str && html_str.indexOf && (html_str.indexOf('onclick') >= 0 || html_str.indexOf('onload') >= 0 || html_str.indexOf('onerror') >= 0)) {
+                    return this.escapeHTML(html_str)
                 }
-            }
 
-            var mapItem = function (item, index) {
-                var itemValue = item,
-                    i = document.createElement('li'),
-                    a = document.createElement('a'),
-                    dataName, dataValue;
-                a.setAttribute('href', '#');
-                i.appendChild(a);
-                if (item.value !== undefined && item.value !== null) {
-                    if (item.label !== undefined && item.label !== null) {
-                        dataName = item.label;
-                        dataValue = that.escape_HTML(item.value);
-                    } else {
-                        dataName = item.value;
-                        dataValue = that.escape_HTML(item.value);
-                    }
-                } else if (item.label !== undefined && item.label !== null) {
-                    dataName = item.label;
-                    dataValue = item.label;
-                } else if (that.displayMember !== undefined && that.displayMember !== '') {
-                    dataName = item[that.displayMember];
-                    dataValue = item[that.valueMember];
-                } else {
-                    dataName = item;
-                    dataValue = item;
-                }
-                i.setAttribute('data-value', dataValue);
-                i.setAttribute('data-name', dataName);
+                var sanitized = this.sanitizeHTML(html_str);
 
-                if (item.label) {
-                    itemValue = item.label;
-                }
-                else if (that.displayMember) {
-                    itemValue = item[that.displayMember];
-                }
+                return sanitized;
+            },
 
-                a.innerHTML = that.highlight(itemValue);
-                var plusClass = '';
-                if (that.rtl) {
-                    plusClass = ' jqx-rtl';
-                }
-                if (index === 0) {
-                    plusClass += ' jqx-fill-state-pressed';
+            _render: function (originalItems) {
+                var that = this,
+                    popupChildren = that._popupHelper.children();
+
+                if (popupChildren.length > 0) {
+                    for (var j = 0; j < popupChildren.length; j++) {
+                        $(popupChildren[j]).remove();
+                    }
                 }
-                i.className = that.toThemeProperty('jqx-item jqx-menu-item jqx-rc-all' + plusClass);
-                that.$popup.appendChild(i);
 
-                that.addHandler(i, 'mouseenter', function (event) { that.mouseenter(event); });
-            };
+                var mapItem = function (item, index) {
+                    var itemValue = item,
+                        i = document.createElement('li'),
+                        a = document.createElement('a'),
+                        dataName, dataValue;
+                    a.setAttribute('href', '#');
+                    i.appendChild(a);
+                    if (item.value !== undefined && item.value !== null) {
+                        if (item.label !== undefined && item.label !== null) {
+                            dataName = item.label;
+                            dataValue = that.escape_HTML(item.value);
+                        } else {
+                            dataName = item.value;
+                            dataValue = that.escape_HTML(item.value);
+                        }
+                    } else if (item.label !== undefined && item.label !== null) {
+                        dataName = item.label;
+                        dataValue = item.label;
+                    } else if (that.displayMember !== undefined && that.displayMember !== '') {
+                        dataName = item[that.displayMember];
+                        dataValue = item[that.valueMember];
+                    } else {
+                        dataName = item;
+                        dataValue = item;
+                    }
+                    i.setAttribute('data-value', dataValue);
+                    i.setAttribute('data-name', dataName);
 
-            var mapItems = function (source) {
-                for (var i = 0; i < source.length; i++) {
-                    mapItem(source[i], i);
-                }
-            };
+                    if (item.label) {
+                        itemValue = item.label;
+                    }
+                    else if (that.displayMember) {
+                        itemValue = item[that.displayMember];
+                    }
 
-            mapItems(originalItems);
+                    a.innerHTML = that.highlight(itemValue);
+                    var plusClass = '';
+                    if (that.rtl) {
+                        plusClass = ' jqx-rtl';
+                    }
+                    if (index === 0) {
+                        plusClass += ' jqx-fill-state-pressed';
+                    }
+                    i.className = that.toThemeProperty('jqx-item jqx-menu-item jqx-rc-all' + plusClass);
+                    that.$popup.appendChild(i);
 
-            if (!this.dropDownWidth) {
-                this.$popup.style.width = that._toPx(that.element.offsetWidth - 6);
-            } else {
-                this.$popup.style.width = that._toPx(that.dropDownWidth);
-            }
+                    that.addHandler(i, 'mouseenter', function (event) { that.mouseenter(event); });
+                };
 
-            return this;
-        },
+                var mapItems = function (source) {
+                    for (var i = 0; i < source.length; i++) {
+                        mapItem(source[i], i);
+                    }
+                };
 
-        next: function () {
-            var active = this._find('jqx-fill-state-pressed', this._popupHelper),
-                next = active.nextSibling;
-            $(active).removeClass(this.toThemeProperty('jqx-fill-state-pressed'));
-            if (!next) {
-                next = this.$popup.firstChild;
-            }
+                mapItems(originalItems);
 
-            next.className += ' ' + this.toThemeProperty('jqx-fill-state-pressed');
-        },
+                if (!this.dropDownWidth) {
+                    this.$popup.style.width = that._toPx(that.element.offsetWidth - 6);
+                } else {
+                    this.$popup.style.width = that._toPx(that.dropDownWidth);
+                }
 
-        prev: function () {
-            var active = this._find('jqx-fill-state-pressed', this._popupHelper),
-                prev = active.previousSibling;
-            $(active).removeClass(this.toThemeProperty('jqx-fill-state-pressed'));
-            if (!prev) {
-                prev = this.$popup.lastChild;
-            }
+                return this;
+            },
 
-            prev.className += ' ' + this.toThemeProperty('jqx-fill-state-pressed');
-        },
+            next: function () {
+                var active = this._find('jqx-fill-state-pressed', this._popupHelper),
+                    next = active.nextSibling;
+                $(active).removeClass(this.toThemeProperty('jqx-fill-state-pressed'));
+                if (!next) {
+                    next = this.$popup.firstChild;
+                }
 
-        addHandlers: function () {
-            var that = this,
-                eventNamespace = '.jqxInput' + that.element.id;
-            that.addHandler(that.host, 'focus' + eventNamespace, function () { that.onFocus(); });
-            that.addHandler(that.host, 'blur' + eventNamespace, function () { that.onBlur(); });
-            if (that.isMaterialized() && this.input instanceof HTMLInputElement) {
-                that.addHandler(that.input, 'blur' + eventNamespace, function () { that.onBlur(); });
-            }
+                next.className += ' ' + this.toThemeProperty('jqx-fill-state-pressed');
+            },
 
-            that.addHandler(that.host, 'change' + eventNamespace, function (event) {
-                if (that.opened && !event.args) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    event.stopImmediatePropagation();
+            prev: function () {
+                var active = this._find('jqx-fill-state-pressed', this._popupHelper),
+                    prev = active.previousSibling;
+                $(active).removeClass(this.toThemeProperty('jqx-fill-state-pressed'));
+                if (!prev) {
+                    prev = this.$popup.lastChild;
+                }
 
-                    return;
+                prev.className += ' ' + this.toThemeProperty('jqx-fill-state-pressed');
+            },
+
+            addHandlers: function () {
+                var that = this,
+                    eventNamespace = '.jqxInput' + that.element.id;
+                that.addHandler(that.host, 'focus' + eventNamespace, function () { that.onFocus(); });
+                that.addHandler(that.host, 'blur' + eventNamespace, function () { that.onBlur(); });
+                if (that.isMaterialized() && this.input instanceof HTMLInputElement) {
+                    that.addHandler(that.input, 'blur' + eventNamespace, function () { that.onBlur(); });
                 }
-                if (!event.args) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    event.stopImmediatePropagation();
 
-                    var item = that.val(),
-                        label, val;
-                    if (item && item.label) {
-                        label = item.label;
-                        val = item.val;
-                    }
-                    else {
-                        label = item;
-                        val = item;
+                that.addHandler(that.host, 'change' + eventNamespace, function (event) {
+                    if (that.opened && !event.args) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+
+                        return;
                     }
-                    that._raiseEvent('3', { type: 'keyboard', 'item': { 'label': label, 'value': val }, 'label': label, 'value': val });
-                    that.value = label;
-                    that._refreshPlaceHolder();
-                }
-            });
+                    if (!event.args) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
 
-            that.addHandler(that.host, 'keypress' + eventNamespace, function (event) { that.keypress(event); });
-            that.addHandler(that.host, 'keyup' + eventNamespace, function (event) { that.keyup(event); });
-            that.addHandler(that.host, 'keydown' + eventNamespace, function (event) { that.keydown(event); });
-            that.addHandler(that.$popup, 'pointerdown' + eventNamespace, function (event) { that.click(event); });
-        },
+                        var item = that.val(),
+                            label, val;
+                        if (item && item.label) {
+                            label = item.label;
+                            val = item.val;
+                        }
+                        else {
+                            label = item;
+                            val = item;
+                        }
+                        that._raiseEvent('3', { type: 'keyboard', 'item': { 'label': label, 'value': val }, 'label': label, 'value': val });
+                        that.value = label;
+                        that._refreshPlaceHolder();
+                    }
+                });
 
-        removeHandlers: function () {
-            var that = this,
-                eventNamespace = '.jqxInput' + that.element.id;
-            that.removeHandler(that.host, 'change' + eventNamespace);
-            that.removeHandler(that.host, 'focus' + eventNamespace);
-            that.removeHandler(that.host, 'blur' + eventNamespace);
-            that.removeHandler(that.host, 'keypress' + eventNamespace);
-            that.removeHandler(that.host, 'keyup' + eventNamespace);
-            that.removeHandler(that.host, 'keydown' + eventNamespace);
-            that.removeHandler(that.$popup, 'pointerdown' + eventNamespace);
-        },
+                that.addHandler(that.host, 'keypress' + eventNamespace, function (event) { that.keypress(event); });
+                that.addHandler(that.host, 'keyup' + eventNamespace, function (event) { that.keyup(event); });
+                that.addHandler(that.host, 'keydown' + eventNamespace, function (event) { that.keydown(event); });
+                that.addHandler(that.$popup, 'pointerdown' + eventNamespace, function (event) { that.click(event); });
+            },
 
-        move: function (e) {
-            if (!this.opened) {
-                return;
-            }
+            removeHandlers: function () {
+                var that = this,
+                    eventNamespace = '.jqxInput' + that.element.id;
+                that.removeHandler(that.host, 'change' + eventNamespace);
+                that.removeHandler(that.host, 'focus' + eventNamespace);
+                that.removeHandler(that.host, 'blur' + eventNamespace);
+                that.removeHandler(that.host, 'keypress' + eventNamespace);
+                that.removeHandler(that.host, 'keyup' + eventNamespace);
+                that.removeHandler(that.host, 'keydown' + eventNamespace);
+                that.removeHandler(that.$popup, 'pointerdown' + eventNamespace);
+            },
 
-            switch (e.keyCode) {
-                case 9: // tab
-                case 13: // enter
-                case 27: // escape
-                    e.preventDefault();
-                    break;
+            move: function (e) {
+                if (!this.opened) {
+                    return;
+                }
 
-                case 38: // up arrow
-                    if (!e.shiftKey) {
+                switch (e.keyCode) {
+                    case 9: // tab
+                    case 13: // enter
+                    case 27: // escape
                         e.preventDefault();
-                        this.prev();
-                    }
-                    break;
+                        break;
 
-                case 40: // down arrow
-                    if (!e.shiftKey) {
-                        e.preventDefault();
-                        this.next();
-                    }
-                    break;
-            }
+                    case 38: // up arrow
+                        if (!e.shiftKey) {
+                            e.preventDefault();
+                            this.prev();
+                        }
+                        break;
 
-            e.stopPropagation();
-        },
+                    case 40: // down arrow
+                        if (!e.shiftKey) {
+                            e.preventDefault();
+                            this.next();
+                        }
+                        break;
+                }
 
-        keydown: function (e) {
-            var arr = [40, 38, 9, 13, 27];
-            this.suppressKeyPressRepeat = arr.indexOf(e.keyCode) !== -1;
-            this.move(e);
-        },
+                e.stopPropagation();
+            },
 
-        keypress: function (e) {
-            if (this.suppressKeyPressRepeat) {
-                return;
-            }
-            this.move(e);
-        },
+            keydown: function (e) {
+                var arr = [40, 38, 9, 13, 27];
+                this.suppressKeyPressRepeat = arr.indexOf(e.keyCode) !== -1;
 
-        keyup: function (e) {
-            switch (e.keyCode) {
-                case 40: // down arrow
-                case 38: // up arrow
-                case 16: // shift
-                case 17: // ctrl
-                case 18: // alt
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
-
-                case 9: // tab
-                case 13: // enter
+                if (e.key === 'Tab') {
                     if (!this.opened) {
+                        if (this.inlineAutoComplete) {
+                            this.select(e, this, 'keyboard');
+                        }
                         return;
                     }
-                    this.select(e, this, 'keyboard');
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
+                }
+                this.move(e);
+            },
 
-                case 27: // escape
-                    if (!this.opened) {
-                        return;
-                    }
-                    this.close();
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
+            keypress: function (e) {
+                if (this.suppressKeyPressRepeat) {
+                    return;
+                }
+                this.move(e);
+            },
 
-                default:
-                    {
-                        var me = this;
-                        if (this.timer) {
-                            clearTimeout(this.timer);
+            keyup: function (e) {
+                switch (e.keyCode) {
+                    case 40: // down arrow
+                    case 38: // up arrow
+                    case 16: // shift
+                    case 17: // ctrl
+                    case 18: // alt
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+
+                    case 9: // tab
+                    case 13: // enter
+                        if (!this.opened) {
+                            if (this.inlineAutoComplete) {
+                                this.select(e, this, 'keyboard');
+                                e.stopPropagation();
+                                e.preventDefault();
+                            }
+                            return;
                         }
-                        this.timer = setTimeout(function () {
-                            me.suggest();
-                        }, 300);
-                    }
-            }
+                        this.select(e, this, 'keyboard');
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
 
-        },
+                    case 27: // escape
+                        if (!this.opened) {
+                            return;
+                        }
+                        this.close();
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
 
-        clear: function () {
-            this.val('');
-        },
+                    default:
+                        {
+                            var me = this;
+                            if (this.timer) {
+                                clearTimeout(this.timer);
+                            }
 
-        onBlur: function () {
-            var that = this;
-            setTimeout(function () { that.close(); }, 150);
-            that.host.removeClass(that.toThemeProperty('jqx-fill-state-focus'));
-            that._refreshPlaceHolder();
-        },
+                            if (this.inlineAutoComplete) {
+                                me.suggest();
+                                return;
+                            }
+                            this.timer = setTimeout(function () {
+                                me.suggest();
+                            }, 300);
+                        }
+                }
 
-        onFocus: function () {
-            var that = this;
-            that.element.className += ' ' + that.toThemeProperty('jqx-fill-state-focus');
-            that._refreshPlaceHolder();
-        },
+            },
 
-        click: function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.select(e, this, 'mouse');
-        },
+            clear: function () {
+                this.val('');
+            },
 
-        mouseenter: function (e) {
-            $(this._find('jqx-fill-state-pressed', this._popupHelper)).removeClass(this.toThemeProperty('jqx-fill-state-pressed'));
-            e.currentTarget.className += ' ' + this.toThemeProperty('jqx-fill-state-pressed');
-        },
+            onBlur: function () {
+                var that = this;
+                setTimeout(function () { that.close(); }, 150);
+                that.host.removeClass(that.toThemeProperty('jqx-fill-state-focus'));
+                that._refreshPlaceHolder();
+            },
 
-        _toPx: function (value) {
-            if (typeof value === 'number') {
-                return value + 'px';
-            } else {
-                return value;
-            }
-        },
+            onFocus: function () {
+                var that = this;
+                that.element.className += ' ' + that.toThemeProperty('jqx-fill-state-focus');
+                that._refreshPlaceHolder();
+            },
 
-        _find: function (className, parentElement) {
-            var children = parentElement.children();
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
-                if (child.className.indexOf(className) !== -1) {
-                    return child;
+            click: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.select(e, this, 'mouse');
+            },
+
+            mouseenter: function (e) {
+                $(this._find('jqx-fill-state-pressed', this._popupHelper)).removeClass(this.toThemeProperty('jqx-fill-state-pressed'));
+                e.currentTarget.className += ' ' + this.toThemeProperty('jqx-fill-state-pressed');
+            },
+
+            _toPx: function (value) {
+                if (typeof value === 'number') {
+                    return value + 'px';
+                } else {
+                    return value;
                 }
-            }
-        },
+            },
 
-        _getAddonsWidth: function () {
-            var that = this,
-                children = that.baseHost.children(),
-                result = 0;
+            _find: function (className, parentElement) {
+                var children = parentElement.children();
+                for (var i = 0; i < children.length; i++) {
+                    var child = children[i];
+                    if (child.className.indexOf(className) !== -1) {
+                        return child;
+                    }
+                }
+            },
+
+            _getAddonsWidth: function () {
+                var that = this,
+                    children = that.baseHost.children(),
+                    result = 0;
 
-            for (var i = 0; i < children.length; i++) {
-                if (children[i] !== that.element) {
-                    result += $(children[i]).outerWidth();
+                for (var i = 0; i < children.length; i++) {
+                    if (children[i] !== that.element) {
+                        result += $(children[i]).outerWidth();
+                    }
                 }
-            }
 
-            return result;
-        }
-    });
-})(jqxBaseFramework); //ignore jslint
+                return result;
+            }
+        });
+    })(jqxBaseFramework); //ignore jslint
 })();
 
 /***/ }),
@@ -20583,7 +20837,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_759217__(moduleId) {
+/******/ 	function __nested_webpack_require_774751__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -20597,7 +20851,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_759217__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_774751__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
@@ -20606,17 +20860,17 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 /************************************************************************/
 /******/ 	/* webpack/runtime/amd options */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_759217__.amdO = {};
+/******/ 		__nested_webpack_require_774751__.amdO = {};
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/compat get default export */
 /******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__nested_webpack_require_759217__.n = (module) => {
+/******/ 		__nested_webpack_require_774751__.n = (module) => {
 /******/ 			var getter = module && module.__esModule ?
 /******/ 				() => (module['default']) :
 /******/ 				() => (module);
-/******/ 			__nested_webpack_require_759217__.d(getter, { a: getter });
+/******/ 			__nested_webpack_require_774751__.d(getter, { a: getter });
 /******/ 			return getter;
 /******/ 		};
 /******/ 	})();
@@ -20624,9 +20878,9 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_759217__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_774751__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_759217__.o(definition, key) && !__nested_webpack_require_759217__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_774751__.o(definition, key) && !__nested_webpack_require_774751__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -20635,7 +20889,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* tslint:disabl
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_759217__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_774751__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /************************************************************************/
@@ -20643,20 +20897,26 @@ var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be in strict mode.
 (() => {
 "use strict";
-/* harmony import */ var _jqxcore__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_759217__(5459);
-/* harmony import */ var _jqxcore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_759217__.n(_jqxcore__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _jqxdatetimeinput__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_759217__(4993);
-/* harmony import */ var _jqxdatetimeinput__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_759217__.n(_jqxdatetimeinput__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _jqxinput__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_759217__(5875);
-/* harmony import */ var _jqxinput__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__nested_webpack_require_759217__.n(_jqxinput__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _jqxknob__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_759217__(887);
-/* harmony import */ var _jqxknob__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__nested_webpack_require_759217__.n(_jqxknob__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _jqxcore__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_774751__(5459);
+/* harmony import */ var _jqxcore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_774751__.n(_jqxcore__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _jqxdatetimeinput__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_774751__(4993);
+/* harmony import */ var _jqxdatetimeinput__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_774751__.n(_jqxdatetimeinput__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _jqxinput__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_774751__(5875);
+/* harmony import */ var _jqxinput__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__nested_webpack_require_774751__.n(_jqxinput__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _jqxknob__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_774751__(887);
+/* harmony import */ var _jqxknob__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__nested_webpack_require_774751__.n(_jqxknob__WEBPACK_IMPORTED_MODULE_3__);
 
 
 
 
 })();
 
+/******/ })()
+;
+/******/ })()
+;
+/******/ })()
+;
 /******/ })()
 ;
 /******/ })()