You can have a look at the buildFilter function and check whether there actually are inputs amtching the query string. If not the following code alerts 'test', but you could also change the color of the filter or something else:

    /**
     * Builds the filter.
     */
    buildFilter: function() {

        // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength.
        if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) {
            var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering);

            if (this.$select.find('option').length >= enableFilterLength) {

                this.$filter = $(this.options.templates.filter);
                $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
                this.$ul.prepend(this.$filter);

                this.$filter.val(this.query).on('click', function(event) {
                    event.stopPropagation();
                }).on('input keydown', $.proxy(function(event) {
                    // This is useful to catch "keydown" events after the browser has updated the control.
                    clearTimeout(this.searchTimeout);

                    this.searchTimeout = this.asyncFunction($.proxy(function() {

                        if (this.query !== event.target.value) {
                            this.query = event.target.value;

                            $.each($('li', this.$ul), $.proxy(function(index, element) {
                                var value = $('input', element).val();
                                var text = $('label', element).text();

                                var filterCandidate = '';
                                if ((this.options.filterBehavior === 'text')) {
                                    filterCandidate = text;
                                }
                                else if ((this.options.filterBehavior === 'value')) {
                                    filterCandidate = value;
                                }
                                else if (this.options.filterBehavior === 'both') {
                                    filterCandidate = text + '\n' + value;
                                }

                                if (value !== this.options.selectAllValue && text) {
                                    // by default lets assume that element is not
                                    // interesting for this search
                                    var showElement = false;

                                    if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) {
                                        showElement = true;
                                    }
                                    else if (filterCandidate.indexOf(this.query) > -1) {
                                        showElement = true;
                                    }

                                    if (showElement) {
                                        $(element).show();
                                    }
                                    else {
                                        $(element).hide();
                                    }
                                }
                            }, this));

                            if ($('input[value!="' + this.options.selectAllValue + '"][type="checkbox"]:visible', this.$ul).length == 0) {
                                alert('test');
                            }
                        }

                        this.updateSelectAll();
                    }, this), 300, this);
                }, this));
            }
        }
    },

Display 'No results match' message when search doesn't render results #317

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions