doesn't seem to have any effect

Question

I have following select one menu. but case sensitive is not working in it. when I press small a or capital A, it always shows small a (whichever occurs first).

        <p:selectOneMenu id="tempSelect" caseSensitive="true">
                        <f:selectItem itemLabel="0" itemValue="0"/>
                        <f:selectItem itemLabel="a" itemValue="a"/>
                        <f:selectItem itemLabel="A" itemValue="A"/>
                        <f:selectItem itemLabel="b" itemValue="b"/>
        </p:selectOneMenu>

My primefaces version is 5.2.

When the select box is in focus. I press alphabet letter "a" or I press capital alphabet letter "A" , in both cases it only shows "a" in the box (because it occurs first in the list). This is actual behaviour.

My expected behaviour is that when I press "a" it puts "a" and when I press "A" it puts "A" in the box.

What should I do for this?

can you put an example of your actual behaviour and the expected one? Can you also clarify what you mean with *when I press small a or capital A, it always shows small a (whichever occurs first).*? Thanks — Jordi Castilla, Sep 09 '15 at 10:40
when the select box is in focus. I press alphabet letter "a" or I press capital alphabet letter "A" , in both cases it only shows "a" in the box (because it occurs first in the list). This is actual behaviour. My expected behaviour is that when I press "a" it puts "a" and when I press "A" it puts "A" in the box — Imran Khurram, Sep 09 '15 at 11:01
You can try with auto complete http://www.primefaces.org/showcase/ui/input/autoComplete.xhtml — Zeeshan Akhter, Sep 09 '15 at 12:40
how to auto fill the list first time when using auto complete? — Imran Khurram, Sep 09 '15 at 14:12
h:selectOneMenu is not case sensitive. I was using it before. — Imran Khurram, Sep 09 '15 at 14:13
Not the best solution but, have you tried writing a custom filter? — uoyilmaz, Sep 09 '15 at 14:43
Can you please tell some example of such custom filter, which can do this? — Imran Khurram, Sep 09 '15 at 14:58

score 6 · Accepted Answer · edited Feb 26 '16 at 16:38

The Primefaces 5.2 documentation (page 430) says about CaseSensitive option:

Defines if filtering would be case sensitive.

So this option only applies if you use filter="true", and only for the values you type in the filter box.

When you focus on SelectOneMenu control and enter a value, the search will always be case insensitive, as you can see in the source code of Primefaces (line 848). Note that the texts are placed in LowerCase before the comparison.

return $(this).text().toLowerCase().indexOf(text.toLowerCase()) === 0;

One way (not very elegant) you solve this problem is overriding the Primefaces function responsible for this filter. Remember that, in this case, others SelectOneMenu controls in the same page will be case sensitive too.

So the line 848 would become like this:

return $(this).text().indexOf(text) === 0;

Another detail that should probably be considered (if you really want to overwrite the function) is that on line 842 of source code, Primefaces discards all entries that have the Shift key.

metaKey = e.metaKey||e.ctrlKey||e.shiftKey;

Therefore, this line should also be changed like bellow to facilitate entry of capital letters:

metaKey = e.metaKey||e.ctrlKey;

So, considering these two changes, and the final version of Primefaces 5.2 (minified), the solution is to just add the following code somewhere after the SelectOneMenu.

<script>
    PrimeFaces.widget.SelectOneMenu.prototype.bindKeyEvents = function() {
        var a = this;
        this.focusInput.on("keydown.ui-selectonemenu", function(d) {
            var c = $.ui.keyCode, b = d.which;
            switch (b) {
            case c.UP:
            case c.LEFT:
                a.highlightPrev(d);
                break;
            case c.DOWN:
            case c.RIGHT:
                a.highlightNext(d);
                break;
            case c.ENTER:
            case c.NUMPAD_ENTER:
                a.handleEnterKey(d);
                break;
            case c.TAB:
                a.handleTabKey();
                break;
            case c.ESCAPE:
                a.handleEscapeKey(d);
                break
            }
        }).on(
                "keyup.ui-selectonemenu",
                function(g) {
                    var f = $.ui.keyCode, d = g.which;
                    switch (d) {
                    case f.UP:
                    case f.LEFT:
                    case f.DOWN:
                    case f.RIGHT:
                    case f.ENTER:
                    case f.NUMPAD_ENTER:
                    case f.TAB:
                    case f.ESCAPE:
                    case f.SPACE:
                    case f.HOME:
                    case f.PAGE_DOWN:
                    case f.PAGE_UP:
                    case f.END:
                    case f.DELETE:
                    case 16:
                    case 17:
                    case 18:
                    case 224:
                        break;
                    default:
                        var i = $(this).val(), c = null, h = g.metaKey
                                || g.ctrlKey;
                        if (!h) {
                            clearTimeout(a.searchTimer);
                            c = a.options.filter(function() {
                                return $(this).text()
                                        .indexOf(i) === 0
                            });
                            if (c.length) {
                                var b = a.items.eq(c.index());
                                if (a.panel.is(":hidden")) {
                                    a.selectItem(b)
                                } else {
                                    a.highlightItem(b);
                                    PrimeFaces.scrollInView(
                                            a.itemsWrapper, b)
                                }
                            }
                            a.searchTimer = setTimeout(function() {
                                a.focusInput.val("")
                            }, 1000)
                        }
                        break
                    }
                })
    }
</script>

To test, remember that there is a timer of 1 second between each keystroke to clear the cache of letters that have been entered and start a new word.

score 2 · Answer 2 · answered Sep 10 '15 at 07:14

Although is not the perfect solution you can use this workaround. Use a filter. In this way you need one more "click" but it works.

<p:selectOneMenu id="tempSelect" caseSensitive="true" filter="true" filterMatchMode="startsWith"> <f:selectItem itemLabel="0" itemValue="0"/> <f:selectItem itemLabel="a" itemValue="a"/> <f:selectItem itemLabel="A" itemValue="A"/> <f:selectItem itemLabel="b" itemValue="b"/> </p:selectOneMenu>

doesn't seem to have any effect

2 Answers2