Enabling Users to select options via ArrowKeys in a p:selectOneListbox

UI Components for JSF
Post Reply
bavo
Posts: 1
Joined: 25 Nov 2021, 12:58

25 Nov 2021, 13:30

Hello to you all,
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>
And here the javascript function that opens the listbox:

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");
	});
}
PrimeFace:10.0
JSF: PrettyFaces 3.3.3
Server: Wildfly 9.0

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 30 guests