Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-13900

rich:select should support selection by first character if enableManualInput is not used

    Details

    • Type: Feature Request
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: 4.3.7, 4.5.0.Final
    • Fix Version/s: 4.5.1
    • Component/s: component
    • Labels:
    • Environment:

      x-browser

    • Sprint:
      4.5.1 - Sprint 2
    • Estimated Difficulty:
      Low

      Description

      Using rich:select with enableManualInput="false" should behave like a native html select option in the aspect of selecting the corresponding entry when typing the first letter.

      Several customers reported that it is unacceptable not beeing able to select entries of the select-box by typing the first letter of the desired entry.

      Example:
      => create a rich:select with all countries.
      => type through the page using "tab".
      => rich:select with countries obtains focus
      => type "u" => rich:select should select first country beginning with "u"
      => type "u" again => rich:select should select next country beginning with "u" and so on
      => if the last country with "u" is reached, start at again with the first country beginning with "u"

      Here is a rough scratch how this could work:

      Adaption to "__keydownHandler"
      /*
      Numbers: 48-57
      Letters: 65-90
      */
      if(code != null && ((code >= 48 && code <=57) || (code >= 65 && code <= 90)))
      {
      	var keyCodeAsString = String.fromCharCode( code );
      	keyCodeAsString = jQuery.trim( keyCodeAsString );		
      	keyCodeAsString = keyCodeAsString.toLowerCase();
      	if(keyCodeAsString != "")
      	{
      		var visible = this.popupList.isVisible();
      		var matchingItems = new Array();
      		var matchingItemIndexes = new Array();
      		$.each(this.clientSelectItems, function(index) {
      			if(this.label.toLowerCase().indexOf( keyCodeAsString ) == 0) {
      				matchingItems.push( this );
      				matchingItemIndexes.push( index );
      			}
      		});
      		if(matchingItems.length > 0)
      		{
      			var keyCodeCount = 0;
      			if(this.lastKeyCode && this.lastKeyCode == keyCode)
      			{
      				keyCodeCount = this.lastKeyCodeCount + 1;
      				if(keyCodeCount >= matchingItems.length)
      				{
      					keyCodeCount = 0;
      				}
      			}
      			this.lastKeyCode = keyCode;
      			this.lastKeyCodeCount = keyCodeCount;
      					
      			var itemToSelect = matchingItems[keyCodeCount];
      			var itemToSelectIndex = matchingItemIndexes[keyCodeCount];
      					
      			if(visible)
      			{
      				this.list.__selectByIndex( itemToSelectIndex );
      			}
      			else
      			{
      				this.setValue( itemToSelect.value );
      			}
      		}
      	}
      }
      

      Another part of this feature request is, that if a value is already selected, the list should scroll to that selected value when the list is re-opened.

      This could possibly be achieved by adding a call to "this.list._scrollToSelectedItem" in the function "_showPopup"

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                michpetrov Michal Petrov
                Reporter:
                michaelb80 Michael B
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 1 hour
                  1h
                  Remaining:
                  Remaining Estimate - 1 hour
                  1h
                  Logged:
                  Time Spent - Not Specified
                  Not Specified