2015-09-09 7 views
6

次の選択メニューがあります。大文字と小文字は区別されません。小文字か大文字のAを押すと、常に小さいもの(いずれか最初に起こるもの)が表示されます。<p:selectOneMenu caseSensitive = "true">は何の効果もないようです。

 <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> 

私のprimefacesバージョンは5.2です。

選択ボックスにフォーカスがあるとき。私はアルファベットの文字「a」を押すか、大文字のアルファベット「A」を押します。どちらの場合も、ボックスに「a」だけが表示されます(リストの最初に表示されるため)。これは実際の動作です。

"a"を押すと "a"が表示され、 "A"を押すと "A"が表示されます。

どうすればよいですか?

+0

は、あなたの実際の動作の一例と予想されるものを置くことができますか?小文字か大文字Aを押すと、常に小さいもの(どちらか早い方)が表示されます。選択ボックスにフォーカスがあるときはありがとう –

+0

。私はアルファベットの文字「a」を押すか、大文字のアルファベット「A」を押します。どちらの場合も、ボックスに「a」だけが表示されます(リストの最初に表示されるため)。これは実際の動作です。 私は "a"を押すと "a"を押し、 "A"を押すと "A"をボックスに入れると予想されます。 –

+0

自動完成http://www.primefaces.org/で試すことができますshowcase/ui/input/autoComplete.xhtml –

答えて

6

Primefaces 5.2 documentation(ページ430)は、大文字と小文字が区別オプションについて述べている:フィルタリングは大文字と小文字が区別であるかどう

を定義します。

このオプションは、filter = "true"を使用し、フィルタボックスに入力した値に対してのみ適用されます。

SelectOneMenuコントロールにフォーカスして値を入力すると、source code of Primefaces (line 848)に示すように、検索では常に大文字と小文字が区別されません。比較の前にテキストがLowerCaseに配置されていることに注意してください。

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

一つの方法(非常にエレガントではない)あなたはこの問題を解決するため、このフィルタの責任Primefaces機能をオーバーライドしています。この場合、同じページ内の他のSelectOneMenuコントロールでも大文字と小文字が区別されます。

ので、ライン848は次のようになる:(あなたが本当に機能を上書きする場合)は、おそらく考慮すべき

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

別の詳細はline 842 of source codeに、Primefacesは、Shiftキーを持っているすべてのエントリを破棄していることですキー。

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

したがって、この行はまた、大文字の侵入を容易にするには以下のように変更する必要があります。

metaKey = e.metaKey||e.ctrlKey; 

ので、これら二つの変更、およびfinal version of Primefaces 5.2 (minified)を考慮し、解決策はただ、次を追加することです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> 

、入力された文字のキャッシュをクリアし、新しい単語を開始するために、各キーストロークの間にa timer of 1 secondがあることを覚えておいてください。

+0

ありがとうございました。 –

2

完璧な解決策ではありませんが、この回避策を使用できます。 フィルタを使用します。このようにしてもう1回クリックする必要がありますが、それは機能します。

<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>

関連する問題