AutoComplete Source from API

[Kasey]

Alex,

I’m wondering if it would be possible to use AutoComplete with a datasource of an external REST API instead of a SharePoint list? If not I’ll go down the jQuery UI AutoComplete path but I like yours better.

• This topic was modified 5 years, 7 months ago by Kasey. Reason: Wrong forum

[Alexander Bautz]

I haven’t added any official method to override this, but you can hack it by overriding the default function for getting the items like this:

// Copy default function
spjs.ac.getAllItemsREST_old = spjs.ac.getAllItemsREST;
// Override default function
spjs.ac.getAllItemsREST = function (argObj) {
    // Add your custom code here and ensure the output is in this format - including the fields you have specified as "ShowField", "SearchField" and "optionDetailFields":
    spjs.ac.data.dataObj[argObj.applyTo] = {
        "done": true,
        "items": [
            {
                "ID": 1,
                "Title": "Item 1"
            },
            {
                "ID": 2,
                "Title": "Item 2"
            }
        ]
    };
    setTimeout(function () {
        jQspjs("#spjs_acspinner_" + argObj.applyTo).hide().next().show();
        spjs.ac.data.loadFinished = new Date().valueOf();
    }, 100);
};

This function must be placed ABOVE the call to spjs.ac.textField({…}); and you must use the following settings:

...
"useREST":true,
"preloadData":true,
...

If you use autocomplete for other fields and want to use the built in function for those, you must reset the function back to the default after you have finished calling the one using the custom function – do it like this:

// Reset default function
spjs.ac.getAllItemsREST = spjs.ac.getAllItemsREST_old;

Let me know how this works out.

Alexander

[lzuhuo]

Hi Alex.
This is really useful for my projects.
So, I wonder know, if is it possible update items array with new data while the user typing. For example: I have an ajax request API to return more then 45.000 users, but I want to filter using part of user full name on query. The objective is return less results then 45.000.

[Alexander Bautz]

Hi,
I’m not 100% sure I understand, but you can filter the datasource like described here: https://spjsblog.com/dffs/dffs-plugins/spjs-autocomplete/#filterREST

You must of course get the user full name, but this can be done like this (in SharePoint online):

_spPageContextInfo.userDisplayName

Let me know if you have any questions.

Alexander

[lzuhuo]

Let’s Go

I tryed to use filterREST but is not exacly what I need.
For example:
Full Name: Elizeu Eslon Marinho Oliveira.
When the length of the user’s string typed is more then 5, I use an Ajax API resquest to return a JSON object and insert in “obj_aluno” in this part:

spjs.ac.data.dataObj[argObj.applyTo] = {
“done”: true,
“items”: obj_aluno
};

Until this part, the AC Solution works fine. But when the user type in the same field, a diferent name, I intend call another Ajax API request, with another object, and I cant update the spjs.ac.data.dataObj without kill the AC function to reload new options.

[Alexander Bautz]

I’m sorry, but this is not supported. Why are you using a separate Ajax request? – is the data not in a SharePoint list?

Alexander

[lzuhuo]

No. I published an C# Api on Sharepoint IIS to retrieve data from another database as JSON. Much better and faster then using External List Connection.

[Alexander Bautz]

If your Ajax request gets all the items and you modify the spjs.ac.getAllItemsREST function like my example in my reply above it should work, but if your Ajax request only gets a subset of items based on your input in the field it won’t work without modifying other parts of the code.

Alexander

[Author]

Posts