CODEWITHSUNDEEP
autocompletexpagesxpages-extlib
David Leedy
David Leedy

Reputation: 3593

XPages Typeahead autocomplete behavior

In XPages Mobile controls I'm having a problem with Typeahead. Actually I think the behavior changed recently - maybe with the last update of the Ext. Library but I'm not sure. Thats when we noticed the change by the way. Is has been working as desired.

Below are 2 screenshots. The first one is on a normal XPage and the second is inside Mobile Controls.

Notice how the user starts typing a "D" in the first one there's no "autocomplete". But in the second screenshot the user typed a "D" and it immediately added in the first value which in this case starts with an "O". It replaced the "D" that the user typed. (The fact that the record with the beginning "O" is showing is working as designed, so ignore that.)

The problem is I don't want that autocomplete happening at all. I want the behavior of the first screenshot inside mobile controls. so the user can keep typing and it'll will continue to filter the list and not overwrite what the user entered.

I'm fairly certain it used to do that and I don't know what changed. The code itself did not change - that I know.

I've attempted to set autocomplete and autocorrect to "off" without any luck. I'm not sure what the difference is or if they even truly come into play.

How can I get the field to not auto-fill inside of Mobile Controls?

Any advice would be appreciated. I should note that this is privately going to be used on iPads. So it's the Mobile Safari browser.

Thanks!

Here is the basic code for this:

<xp:inputText id="inputJobCode" value="#{viewScope.selectedJob}"
                    styleClass="target span9">
<xp:this.attrs>
    <xp:attr name="placeholder" value="Job Code" />
    <xp:attr name="autocorrect" value="off" />
    <xp:attr name="autocomplete" value="off" />
</xp:this.attrs>
<xp:this.dojoAttributes>
    <xp:dojoAttribute name="autocorrect" value="off" />
    <xp:dojoAttribute name="autocomplete" value="off" />
</xp:this.dojoAttributes>
<xp:typeAhead mode="partial" minChars="1" valueMarkup="true"
    var="searchValue" valueList="#{javascript:return com.companyname.datahub.TypeAhead.jobTypeAhead(searchValue);}">
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var key:String = viewScope.get("selectedJob");
getComponent("inputJobCode").setValue("");
//JobData.load(key);
}]]></xp:this.action>
    </xp:eventHandler>
</xp:inputText>

Preferred Behavior

Not Preferred

Here is what the output HTML is from the mobile control page:

<input type="text" id="view:_id1:checkOutFacilityID_content:_id4:inputText5"
 name="view:_id1:checkOutFacilityID_content:_id4:inputText5" autocomplete="off" 
    class="mblTextBox target" placeholder="Job Code" autocorrect="off"
dojotype="extlib.dijit.mobile.TypeAheadCombo" 
store="view__id1_checkOutFacilityID_content__id4__id9" data-dojo-
props="list:'view__id1_checkOutFacilityID_content__id4__id9', searchAttr:'value', 
labelAttr:'label', labelType:'html'" spellcheck="false" tabindex="0" lang="en" 
widgetid="view:_id1:checkOutFacilityID_content:_id4:inputText5" value="">

Upvotes: 2

Views: 760

Answers (2)

David Leedy
David Leedy

Reputation: 3593

I got an answer for this from the Maire at IBM.

There was a change made in a recent Ext. Library update regarding Type Ahead. The solution for now is to use dojo to add a setting. Here's the email that IBM sent me.

Hi David, The mobile typeAhead behavior changed in the release 901v00_04.20140226-1506 For details of the changes, see the section "Improvements to XPages TypeAhead control support" in the readme.pdf for that release.

I'm reproducing the behavior you're talking about, and I've logged an SPR: SPR#MKEE9L7E9BLink XPages, Mobile TypeAhead, first item in the dropdown is being inserted into the edit box (should not be)

To workaround the issue: The workaround is to write a script changing the edit box behavior, so insert this control into your XPage, and change the name inputText1 to match your edit box's name: 

<xp:panel id="panel1"> 
      <xp:eventHandler event="onClientLoad" submit="false"> 
              <xp:this.script><![CDATA[dijit.byId('#{id:inputText1}').autoComplete=false;/*Note autoComplete=false is different to autocomplete=off*/ ]]></xp:this.script> 
      </xp:eventHandler> 
</xp:panel>

Regards, Maire

Upvotes: 1

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15729

I note the dojoType added to mobile - dojotype="extlib.dijit.mobile.TypeAheadCombo". It sounds like that makes it a mixture of a combo box and typeahead, which explains the functionality you're seeing.

Does it work if you add that Dojo Attribute to the non-mobile one?

Upvotes: 0

Related Questions