jqxInput strange behaviour with source

[Franco SensationParticipant]

Hi all!
We are developing a website based on jqxWidget and we are currently facing a strange problem with source and jqxInput. I’ll try to describe it as better as I can.
We have a page where users can search an address from a jqxInput field. This field has a function connected to 'keyup' event:

$('[id$="txtEdAddressDesc"]').on('keyup',
    function () {
    delayExecution(function () {
        AddressManager._lookup($('[id$="txtEdAddressDesc"]').val());
    }, 1000);
);

delayExecution is a function defined as:

delayExecution = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

used to defer execution of a given function after a given timeout (working).

AddressManager._lookup is a an object method to query an external service returning a JSON with needed informations (working: data and JSON format are both correct).

jqxInput source is defined as:

source =
    {
        datatype: "json",
        localdata: [],
        datafields: [
            { name: 'UiKey', type: 'string' },
            { name: 'TxAddress', type: 'string' },
            { name: 'TxZip', type: 'string' },
            { name: 'TxCity', type: 'string' },
            { name: 'TxProvince', type: 'string' }
        ]
    };

and his dataAdapter is defined as:
dataAdapter = new $.jqx.dataAdapter(source: dataAdapter, {autoBind: true});

So, everytime user types something in the input, we wait 1000msec (just to avoid tons of request while typing) then we do a server request. When server returns results we re-bind them to jqxInput recreating dataAdapter and re-initializing the component with:

    AddressManager.source = OKJson;
    AddressManager.dataAdapter = new $.jqx.dataAdapter(AddressManager.source, {
        autoBind: true
    });
    $('[id$="txtEdAddressDesc"]').jqxInput({ source: AddressManager.dataAdapter, displayMember: "TxAddress", valueMember: "UiKey", placeHolder: "<lang>Insert address</lang>", popupZIndex: 26000 });

(OKJson is the retourned Json from external service and it is ok).

Everything seems to be fine but the problem is on the appearing list:
– Request with field valued as “Road”
– Json filled with “Road” list
– jqxInput dataAdapter correctly created and assigned
– jqxInput list empty
– Request with field valued as “Bay”
– Json filled with “Bay” list
– jqxInput dataAdapter correctly created and assigned
– jqxInput list filled with “Road” list
..and so on. So it seems that when list shows, internal items are not related to our search but to the previous one. This will not happen if we don’t use the delay function. So if we modify our ‘keyup” event as:

    $('[id$="txtEdAddressDesc"]').on('keyup',
        function () {
            AddressManager._lookup($('[id$="txtEdAddressDesc"]').val());
            });

everything is ok..but we prefer to avoid to have a request to every single char typed by the user.
Someone has an idea why this is happening? It seems to be related to delay function but we can’t understand why..

[NadezhdaParticipant]

Hello Franco Sensation,

If I understand you correctly, you would like to disable the auto-complete capabilities. Auto-complete capability is by design and it’s not possible to turn this feature off.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts