META-INF.resources.primefaces-extensions.fuzzysearch.1-fuzzysearch-widget.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions Show documentation
PrimeFaces Extensions components and utilities for PrimeFaces.
There is a newer version: 14.0.7.1
Show newest version
/**
 * PrimeFaces FuzzySearch Widget
 *
 * @since 8.0.1
 */
PrimeFaces.widget.FuzzySearch = PrimeFaces.widget.BaseWidget.extend({

    /**
     * @override
     * @inheritdoc
     * @param {PrimeFaces.widget.BaseWidget.cfg} cfg
     */
    init: function (cfg) {
        this._super(cfg);

        this.keys = ['label'];
        this.datasource = JSON.parse(this.cfg.datasource);
        this.input = $(this.jqId + '_input');
        this.results = $(this.jqId + '_fuzzysearch-search-results');
        this.buttons = this.results.children();
        this.inputs = this.jq.find(':radio:not(:disabled)');
        this.cfg.unselectable = (this.cfg.unselectable === undefined) ? true : this.cfg.unselectable;
        this.cfg.highlight = (this.cfg.highlight === undefined) ? true : this.cfg.highlight;

        //Visual effects
        PrimeFaces.skinInput(this.input);

        this.bindEvents();

        //pfs metadata
        this.inputs.data(PrimeFaces.CLIENT_ID_DATA, this.id);
    },

    bindEvents: function () {
        var $this = this;

        this.input.on('input', function (e) {
            $this.search($this.input.val());
        });

        this.bindEventsForButtons(this.buttons);
    },

    bindEventsForButtons: function (buttons) {
        var $this = this;

        buttons.off()
            .on('mouseover.fuzzySearch', function () {
                var button = $(this);
                button.addClass('ui-state-hover');
            })
            .on('mouseout.fuzzySearch', function () {
                $(this).removeClass('ui-state-hover');
            })
            .on('click.fuzzySearch', function () {
                var button = $(this),
                    radio = button.children(':radio');

                if (button.hasClass('ui-state-active') || radio.prop('checked')) {
                    $this.unselect(button);
                } else {
                    $this.select(button);
                }
            });

        /* For keyboard accessibility */
        buttons
            .on('focus.fuzzySearch', function () {
                var button = $(this);
                button.addClass('ui-state-focus');
            })
            .on('blur.fuzzySearch', function () {
                var button = $(this);
                button.removeClass('ui-state-focus');
            })
            .on('keydown.fuzzySearch', function (e) {
                var keyCode = $.ui.keyCode,
                    key = e.which;

                if (key === keyCode.SPACE || key === keyCode.ENTER) {
                    var button = $(this),
                        radio = button.children(':radio');

                    if (radio.prop('checked')) {
                        $this.unselect(button);
                    } else {
                        $this.select(button);
                    }
                    e.preventDefault();
                }
            });
    },

    search: function (query) {
        var $this = this;

        var resultStyle = this.cfg.resultStyle || '';
        var resultStyleClass = this.cfg.resultStyleClass || '';
        var listItemsAtTheBeginning = this.cfg.listItemsAtTheBeginning;

        var itemDisplayMarkup = '';
        if (query) { // when any input entered
            $.each(fuzzysearch.go(query, $this.datasource, {keys: $this.keys}), function (index, element) {
                itemDisplayMarkup += '';
                if ($this.cfg.highlight) {
                    itemDisplayMarkup += fuzzysearch.highlight(element[0]);
                } else {
                    itemDisplayMarkup += element.obj.label;
                }
                itemDisplayMarkup += '