Фильтр простых лиц не работает с символами i и i

Question

Я использую Primefaces Selectonemenu Advanced. Фильтр работает неправильно, когда я нажимаю i и ı символ. Например, http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml Демонстрация продвинула одно меню. Я ищу строки "arI" и "arİ", и это находит элемент Aristo.

В моем приложении мое меню содержит элемент Испарта. I ключи ввода Isp и Isp строки и фильтр найти Isparta.

Как я могу решить эту проблему?

Answer 1

Я решаю эту проблему с автозаполнением компонента. Компонент автозаполнения Primefaces со свойством dropdown="true" работает как одно меню, и у этого компонента нет турецких символов.

Answer 2

Сообщено команде PrimeFaces: https://github.com/primefaces/primefaces/issues/9629

Исправлено для 13.0.0, но MonkeyPatch представлен здесь:

      if (PrimeFaces.widget.SelectOneMenu) {

    PrimeFaces.widget.SelectOneMenu.prototype.normalize = function(string, lowercase) {
        if (!string) return string;
        var result = string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
        return lowercase ? result.toLowerCase() : result;
    }

    PrimeFaces.widget.SelectOneMenu.prototype.filter = function(value) {
        this.cfg.initialHeight = this.cfg.initialHeight || this.itemsWrapper.height();
        var filterValue = this.normalize(PrimeFaces.trim(value), !this.cfg.caseSensitive);

        if (filterValue === '') {
            this.items.filter(':hidden').show();
            this.itemsContainer.children('.ui-selectonemenu-item-group').show();
        } else {
            var hide = [];
            var show = [];

            for (var i = 0; i < this.options.length; i++) {
                var option = this.options.eq(i),
                    itemLabel = this.normalize(option.text(), !this.cfg.caseSensitive),
                    item = this.items.eq(i);

                if (item.hasClass('ui-noselection-option')) {
                    hide.push(item);
                } else {
                    if (this.filterMatcher(itemLabel, filterValue)) {
                        show.push(item);
                    } else if (!item.is('.ui-selectonemenu-item-group-children')) {
                        hide.push(item);
                    } else {
                        itemLabel = this.normalize(option.parent().attr('label'), !this.cfg.caseSensitive);
                        if (this.filterMatcher(itemLabel, filterValue)) {
                            show.push(item);
                        } else {
                            hide.push(item);
                        }
                    }
                }
            }

            $.each(hide, function(i, o) {
                o.hide();
            });
            $.each(show, function(i, o) {
                o.show();
            });
            hide = [];
            show = [];

            //Toggle groups
            var groups = this.itemsContainer.children('.ui-selectonemenu-item-group');
            for (var g = 0; g < groups.length; g++) {
                var group = groups.eq(g);

                if (g === (groups.length - 1)) {
                    if (group.nextAll().filter('.ui-selectonemenu-item-group-children:visible').length === 0)
                        hide.push(group);
                    else
                        show.push(group);
                } else {
                    if (group.nextUntil('.ui-selectonemenu-item-group').filter('.ui-selectonemenu-item-group-children:visible').length === 0)
                        hide.push(group);
                    else
                        show.push(group);
                }
            }

            $.each(hide, function(i, o) {
                o.hide();
            });
            $.each(show, function(i, o) {
                o.show();
            });
        }

        var firstVisibleItem = this.items.filter(':visible:not(.ui-state-disabled):first');
        if (firstVisibleItem.length) {
            this.highlightItem(firstVisibleItem);
            PrimeFaces.scrollInView(this.itemsWrapper, firstVisibleItem);
        }

        if (this.itemsContainer.height() < this.cfg.initialHeight) {
            this.itemsWrapper.css('height', 'auto');
        } else {
            this.itemsWrapper.height(this.cfg.initialHeight);
        }

        this.alignPanel();
    }
};

Answer 3

Начиная с PrimeFaces 13, нормализацию можно применять как к метке элемента, так и к значению фильтра, установивfilterNormalizeприписыватьtrue. Вы можете сделать то же самое в более старых версиях, используяfilterFunction. Например:

      <script>
function searchable(string) {
    return !string ? '' : string.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
}

function customFilter(itemLabel, filterValue) {
    return searchable(itemLabel).includes(searchable(filterValue));
}
</script>

<p:selectOneMenu filter="true" filterMatchMode="custom" filterFunction="customFilter"
                 .../>

Смотрите также:

• https://primefaces.github.io/primefaces/12_0_0/#/components/selectonemenu?id=filtering