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!

Answer 1

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>