the Project I'm working on contains an inputTextArea which upon being clicked on expands a selectOnelIstbox and offers to the User suggestions on which they can click to insert them in the textarea. Now I'm supposed to expand this so the User is able to select the Suggestions via Arrowkeys.
I've looked around the Internet but found no solution that worked for this implementation.
Here's the html-code for the components:
Code: Select all
<p:outputPanel id="beschreibungWrapper"
styleClass="beschreibungWrapper">
<p:inputTextarea id="description" value="#{booking.beschreibung}"
onfocus="updateBeschreibung()" tabindex="#{rowIndex*10+11}"
rows="2" autoResize="false" styleClass="beschreibungTextarea"
onchange="setConfirmUnload(true)"
disabled="#{stundenbuchungReferenzenPM.isVerknuepfteBuchung(booking)}">
<p:ajax event="keyup" global="false" delay="200" process="@this"
update="beschreibungsvorschlaege"
oncomplete="updateBeschreibung()" />
</p:inputTextarea>
<p:selectOneListbox id="beschreibungsvorschlaege"
converter="omnifaces.SelectItemsConverter"
value="#{booking.beschreibung}" var="bv"
styleClass="beschreibungsvorschlaege">
<f:selectItems var="bVorschlag" itemValue="#{bVorschlag}"
value="#{stundenbuchungErfassungPM.getBeschreibungsvorschlaegeMitFilter(booking)}" />
<p:column>
<ts:outputDate value="#{bv.zuletztVerwendet}" />
<h:outputText value="#{bv.beschreibung}" />
</p:column>
<p:ajax update="beschreibungWrapper" />
</p:selectOneListbox>
</p:outputPanel>
Code: Select all
function updateBeschreibung(){
$('.beschreibungTextarea').each(function(){
if($(this).is(':focus')){
$(this).attr('rows', '8');
}
else{
$(this).attr('rows', '2');
$(this).css('height', 'initial');
}
});
$.each($('.beschreibungWrapper .beschreibungsvorschlaege'),
function(i, c){
var beschreibungstext = $(c).prev(':focus').val();
$.each($(c).find('.ui-selectlistbox-item'),
function(ri, row){
var vorschlag = $(row).find('td>span:nth-child(2)').html();
if(beschreibungstext != undefined && vorschlag !== undefined && vorschlag.toLowerCase().indexOf(beschreibungstext.toLowerCase()) < 0){
$(row).css('display', 'none');
}
});
if($(c).prev().hasClass("ui-state-focus") && $(c).find('tr.ui-selectlistbox-item').filter(function(i, e){return $(e).css("display")!="none"}).size() > 0){
$(c).css('display', 'inherit');
}else if($(c).closest('.ui-selectonelistbox').find(':hover').size() == 0){
$(c).css('display', 'none');
}
$(c).find('.ui-selectlistbox-listcontainer').css("height", "");
$(c).find('.ui-selectlistbox-listcontainer').css("max-height", "200px");
});
}