devextreme/dist/transpiled/ui/autocomplete.js

HTML5 JavaScript Component Suite for Responsive Web Development

"use strict";

var $ = require("../core/renderer"),
    noop = require("../core/utils/common").noop,
    registerComponent = require("../core/component_registrator"),
    extend = require("../core/utils/extend").extend,
    DropDownList = require("./drop_down_editor/ui.drop_down_list"),
    themes = require("./themes"),
    Deferred = require("../core/utils/deferred").Deferred;

var AUTOCOMPLETE_CLASS = "dx-autocomplete",
    AUTOCOMPLETE_POPUP_WRAPPER_CLASS = "dx-autocomplete-popup-wrapper";

/**
* @name dxAutocomplete
* @isEditor
* @publicName dxAutocomplete
* @inherits dxDropDownList
* @module ui/autocomplete
* @export default
*/
var Autocomplete = DropDownList.inherit({

    _supportedKeys: function _supportedKeys() {
        var item = this._list ? this._list.option("focusedElement") : null,
            parent = this.callBase();

        item = item && $(item);

        return extend({}, parent, {
            upArrow: function upArrow(e) {
                e.preventDefault();
                e.stopPropagation();
                if (item && !item.prev().length) {
                    this._clearFocusedItem();
                    return false;
                }
                return true;
            },
            downArrow: function downArrow(e) {
                e.preventDefault();
                e.stopPropagation();
                if (item && !item.next().length) {
                    this._clearFocusedItem();
                    return false;
                }
                return true;
            },
            enter: function enter() {
                if (!item) {
                    this.close();
                }
                parent.enter.apply(this, arguments);
                return this.option("opened");
            }
        });
    },

    _getDefaultOptions: function _getDefaultOptions() {
        return extend(this.callBase(), {
            /**
            * @name dxAutocompleteOptions.value
            * @publicName value
            * @type string
            * @default null
            */

            /**
            * @name dxAutocompleteOptions.minSearchLength
            * @publicName minSearchLength
            * @type number
            * @default 1
            */
            minSearchLength: 1,

            /**
            * @name dxAutocompleteOptions.maxItemCount
            * @publicName maxItemCount
            * @type number
            * @default 10
            */
            maxItemCount: 10,

            /**
            * @name dxAutocompleteOptions.noDataText
            * @publicName noDataText
            * @type string
            * @default ""
            * @hidden
            */
            noDataText: "",

            showDropDownButton: false,
            searchEnabled: true

            /**
            * @name dxAutocompleteOptions.displayExpr
            * @publicName displayExpr
            * @hidden
            */

            /**
            * @name dxAutocompleteOptions.acceptCustomValue
            * @publicName acceptCustomValue
            * @hidden
            * @inheritdoc
            */

            /**
            * @name dxAutocompleteOptions.searchEnabled
            * @publicName searchEnabled
            * @hidden
            * @inheritdoc
            */

            /**
            * @name dxAutocompleteOptions.showDataBeforeSearch
            * @publicName showDataBeforeSearch
            * @hidden
            * @inheritdoc
            */
        });
    },

    _defaultOptionsRules: function _defaultOptionsRules() {
        return this.callBase().concat([{
            device: function device() {
                return (/android5/.test(themes.current())
                );
            },
            options: {
                popupPosition: {
                    offset: {
                        h: -16,
                        v: -8
                    }
                }
            }
        }]);
    },

    /**
    * @name dxAutocompletemethods.open
    * @publicName open()
    * @hidden
    */
    /**
    * @name dxAutocompletemethods.close
    * @publicName close()
    * @hidden
    */

    _initMarkup: function _initMarkup() {
        this.callBase();
        this.$element().addClass(AUTOCOMPLETE_CLASS);
        this.setAria("autocomplete", "inline");
    },

    _loadValue: function _loadValue() {
        return new Deferred().resolve(this.option("value"));
    },

    _displayGetterExpr: function _displayGetterExpr() {
        return this.option("valueExpr");
    },

    _setSelectedItem: function _setSelectedItem(item) {
        this.callBase(item);
        this.option("displayValue", this.option("value"));
    },

    _popupConfig: function _popupConfig() {
        return extend(this.callBase(), {
            closeOnOutsideClick: function (e) {
                return !$(e.target).closest(this.$element()).length;
            }.bind(this)
        });
    },

    _renderDimensions: function _renderDimensions() {
        this.callBase();
        this._setPopupOption("width");
    },

    _popupWrapperClass: function _popupWrapperClass() {
        return this.callBase() + " " + AUTOCOMPLETE_POPUP_WRAPPER_CLASS;
    },

    _listConfig: function _listConfig() {
        return extend(this.callBase(), {
            pageLoadMode: "none",
            indicateLoading: false
        });
    },

    _listItemClickHandler: function _listItemClickHandler(e) {
        var value = this._displayGetter(e.itemData);
        this.option("value", value);
        this.close();
    },

    _setListDataSource: function _setListDataSource() {
        if (!this._list) {
            return;
        }

        this._list.option("selectedItems", []);
        this.callBase();
    },

    _refreshSelected: noop,

    _searchCanceled: function _searchCanceled() {
        this.callBase();
        this.close();
    },

    _dataSourceOptions: function _dataSourceOptions() {
        return {
            paginate: true
        };
    },

    _searchDataSource: function _searchDataSource() {
        this._dataSource.pageSize(this.option("maxItemCount"));
        this.callBase();
        this._clearFocusedItem();
    },

    _clearFocusedItem: function _clearFocusedItem() {
        if (this._list) {
            this._list.option("focusedElement", null);
            this._list.option("selectedIndex", -1);
        }
    },

    _renderValueEventName: function _renderValueEventName() {
        return "input keyup";
    },

    _searchHandler: function _searchHandler(e) {
        if (this._isControlKey(e.key)) {
            return;
        }

        this.callBase(e);
    },

    _optionChanged: function _optionChanged(args) {
        switch (args.name) {
            case "maxItemCount":
                this._searchDataSource();
                break;
            case "valueExpr":
                this._compileDisplayGetter();
                this.callBase(args);
                break;
            default:
                this.callBase(args);
        }
    },

    reset: function reset() {
        this.callBase();
        this.close();
    }
});

registerComponent("dxAutocomplete", Autocomplete);

module.exports = Autocomplete;