<p: selectOneMenu caseSensitive = "true"> non sembra avere alcun effetto

Question

Ho seguito un menu. ma la distinzione tra maiuscole e minuscole non funziona. quando premo piccola a o maiuscola A, essa mostra sempre una a (qualunque cosa avvenga prima).

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

La mia versione di primefaces è 5.2.

Quando la casella di selezione è a fuoco. Premo la lettera dell'alfabeto "a" o premo la lettera maiuscola "A", in entrambi i casi mostra solo "a" nella casella (perché si verifica prima nell'elenco). Questo è un comportamento reale.

Il mio comportamento previsto è che quando premo "a" si mette "a" e quando premo "A" mette "A" nella casella.

Cosa devo fare per questo?

Answer 1

Il Primefaces 5.2 documentation (pagina 430) dice di opzione CaseSensitive:

Definisce se il filtraggio sarebbe maiuscole e minuscole.

Quindi questa opzione si applica solo se si utilizza filter = "true" e solo per i valori digitati nella casella del filtro.

Quando ci si concentra sul controllo SelectOneMenu e si inserisce un valore, la ricerca sarà sempre senza distinzione tra maiuscole e minuscole, come si può vedere nello source code of Primefaces (line 848). Si noti che i testi sono collocati in LowerCase prima del confronto.

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

---

Un modo (non molto elegante) a risolvere questo problema è prevalente la primefaces funzione responsabile per questo filtro. Ricorda che, in questo caso, anche altri controlli SelectOneMenu nella stessa pagina saranno sensibili al maiuscolo/minuscolo.

Così la linea 848 sarebbe diventato in questo modo:

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

Un altro dettaglio che dovrebbe probabilmente essere considerato (se si vuole veramente sovrascrivere la funzione) è che il line 842 of source code, primefaces scarta tutte le voci che hanno Shift chiave.

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

Pertanto, questa linea dovrebbe anche essere cambiato come muggito per facilitare l'ingresso delle lettere maiuscole:

metaKey = e.metaKey||e.ctrlKey; 

Quindi, considerando questi due cambiamenti, e la final version of Primefaces 5.2 (minified), la soluzione è quella di aggiungere solo il seguente codice da qualche parte dopo 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> 

Per provare, ricordate che c'è a timer of 1 second tra ogni sequenza di tasti per cancellare la cache di lettere che sono stati inseriti e iniziare una nuova parola.

Answer 2

Sebbene non sia la soluzione perfetta, è possibile utilizzare questa soluzione alternativa. Utilizza un filtro. In questo modo hai bisogno di un altro "click" ma funziona.

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