XPages Type Ahead fails while loading suggestions

Question

We are using an inputText XPages control with Type Ahead for auto-completion. When typing in the search field, no suggestions appear. We have a list of comma-separated suggestions set in the Type Ahead properties pane, and the suggestions separator is ",". We have also tried using "new line"-separated suggestions. Minimum characters is "1". Here is the xml for the inputText:

<xp:inputText id="inputText2">
<xp:typeAhead mode="partial" minChars="1" ignoreCase="true" valueListSeparator=",">
    <xp:this.valueList><![CDATA[Homer,Marge,Bart,Lisa,Maggie]]></xp:this.valueList>
</xp:typeAhead>
</xp:inputText>

Using mode "full" and "partial" both fail, but with different errors. When using "full", for each letter typed in the search field the following errors appear in the browser console (yes, all of these are caused by a single key press):

Error: Unable to load undefined status:404
dijit.form.ComboBox: Error: Unable to load undefined status:404
Error: Unable to load undefined status:404
Error: Unable to load undefined status:404
Error: Unable to load undefined status:404

Similarly for mode "partial", the following error message appears for each letter typed:

'url' is null or not an object

This last error originates in dojo.js (minified version used with Lotus Notes 8.5.3, line 14, character 84996). We are not sure which version of dojo this is, because it is not stated in the minified script, but we think Version 1.6.1 is approximately the right version. We have isolated the code that causes the error:

dojo._ioAddQueryToUrl = function(/*dojo.__IoCallbackArgs*/ioArgs){
    //summary: Adds query params discovered by the io deferred construction to the URL.
    //Only use this for operations which are fundamentally GET-type operations.
    if(ioArgs.query.length){
        ioArgs.url += (ioArgs.url.indexOf("?") == -1 ? "?" : "&") + ioArgs.query;
        ioArgs.query = null;
    }
};

It is ioArgs.url += ... that causes the error.

The generated markup for the inputText looks like this:

<span id="view:_id36:_id38:_id119" dojotype="ibm.xsp.widget.layout.data.TypeAheadReadStore" jsid="view__id36__id38__id119" mode="full"></span>
<div class="dijit dijitReset dijitInlineTable dijitLeft xspInputFieldEditBox dijitTextBox dijitComboBox" id="widget_view:_id36:_id38:inputText2" role="combobox" widgetid="view:_id36:_id38:inputText2">
<div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" dojoattachpoint="_buttonNode, _popupStateNode" role="presentation" style="display: none;">
    <input class="dijitReset dijitInputField dijitArrowButtonInner" value="? " type="text" tabindex="-1" readonly="readonly" role="presentation">
</div>
<div class="dijitReset dijitValidationContainer">
    <input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="? " type="text" tabindex="-1" readonly="readonly" role="presentation">
</div>
<div class="dijitReset dijitInputField dijitInputContainer">
    <input class="dijitReset dijitInputInner" name="view:_id36:_id38:inputText2" type="text" autocomplete="off" dojoattachpoint="textbox,focusNode" role="textbox" aria-haspopup="true" id="view:_id36:_id38:inputText2" tabindex="0" value="">
</div>
</div>

Any suggestions (pun intended) would be greatly appreciated!

hit F12 and look for network traffic, then check what url/request causes error 404. — Frantisek Kossuth, Nov 27 '12 at 11:19
And check why you get an error message about dijit.form.ComboBox. Do you have a ComboBox on the same page that fails? Try removing that ComboBox from the XPage and see what happens. — Per Henrik Lausten, Nov 27 '12 at 11:20
@FrantisekKossuth The request that causes the error is (with server and database names anonymized): http://.com/.nsf/undefined . — Øystein Grande Jaren, Nov 27 '12 at 11:40
1) there is no .xsp in url - just a thought: if your page opens by autolaunch property, address bar does not contain path+nsf and xpage name. try your page with full url in address bar 2) undefined - it seems something is not initialized. it may be page name, or undefined query variable... try to fix step one first. — Frantisek Kossuth, Nov 27 '12 at 11:49
@PerHenrikLausten Nothing else on the page uses ComboBox. I guess this is what Type Ahead uses to display the list of suggestions as you type. The grandparent div of the input field has a class "dijitComboBox", as well as "role='combobox'". This is all generated by Type Ahead. — Øystein Grande Jaren, Nov 27 '12 at 11:50
Looks like the url property of *ibm.xsp.widget.layout.data.TypeAheadReadStore* is not initialized correctly. Does other *dojo.xhr* calls (partial refreshs etc) work on your XPage? What is the *action* property set to (of the generated form element)? — Sven Hasselbach, Nov 27 '12 at 13:39
@SvenHasselbach We don't use any other dojo.xhr calls on the page. Actually, there is no form element. I just added the generated markup to the original post. — Øystein Grande Jaren, Nov 27 '12 at 14:24
@Øystein Jaren Samuelsen: I have just discovered, that my chrome shows the same error - server/nsf/undefined. To my surprise it was caused by malvare called Complitly or Widdit. Doublecheck your computer for it... — Frantisek Kossuth, Nov 29 '12 at 00:18

Sven Hasselbach · Accepted Answer · 2012-11-28T12:26:35.090

Please check the XPages property createForm. If is set to false, remove it or change it to true.

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="true">

The Type Ahead functionality calculates the target URL from the action property of the HTML form. If this form is not available, the type ahead fails. If you need to disable the automatically generated form, you have to add a form manually to the XPage.

Edit:

Alternativly you could overwrite the CSJS code of the Typeahead data store and manipulate the fetch method to inject your URL of your XPage.

Edit 2:

Here is a script block which fixes the typeahead:

<xp:scriptBlock id="scriptBlockFixTypeAhead">
    <xp:this.value>
        <![CDATA[dojo.addOnLoad(function(){
            ibm.xsp.widget.layout.data.TypeAheadReadStore.prototype.fetch = function tars_f(_5) {
            var _6 = _5.query.name;
            if (_6.length < this.minChars) {
                _5.onComplete([], _5);
                return;
            }
            this.content.$$value = _6;
            var _7 = {url: '#{javascript:context.getUrl().getPath()}', 
               handleAs: "text", timeout: XSP.submitLatency, content: this.content,
               form: this.sendForm ? this.formId : null, 
               load: dojo.hitch(this, this.retrieved, _5),
               error: dojo.hitch(_5, _5.onError)};
            dojo.xhr(this.method, _7, !this.contentInUrl);
            return _5;
        }})
    ]]></xp:this.value>
</xp:scriptBlock>

Thanks for your reply. createForm was indeed set to false on our page. Setting it to true fixes part of the problem, but it conflicts with other functionality on our page. Adding the form element manually is also problematic. We will have to get back to this issue later, as we are out of time at the moment. — Øystein Grande Jaren, Nov 28 '12 at 12:06
@Øystein Jaren Samuelsen: I have added another workaround, a hard hack of the CSJS code. Just add the script block to your page. Hope this helps. — Sven Hasselbach, Nov 28 '12 at 12:27

XPages Type Ahead fails while loading suggestions

1 Answers1