Autocomplete / tags and AJAX

Loren Maxwell

Just a quick question / request -- any chance that the new (and wonderful) autocomplete and tags fields will eventually have the same AJAX capabilities as a regular AJAX request?

For example, the US state of Texas is divided into 254 counties.

Something like this would help get all the relevant counties from a table with all counties for every state in the US:

new DataTable.Editor({
    ajax: '/api/data',
    fields: [{
        label: 'Counties:',
        name: 'county',
        type: 'tags',
        ajax: {
            url: '/api/counties',
            data: {
                state: 'Texas'
            }
    }],
    // ...
})

allan

Do you mean the ability to add extra information to the Ajax request, or provide the other options for it as an object (like ajax.data)?

Allan

Loren Maxwell

Yeah -- exactly like that. I think it would make a world of difference in terms of the flexibility on the backend.

Loren Maxwell

Oh sorry -- I don't think I read your question correctly -- I meant like ajax.data.

allan

Good idea, thank you. I've got it on the list .

Allan

Loren Maxwell

Hey @allan -- is this something that will be included in Editor 2.4.1?

I have my own custom field plugin that I am tinkering with but I could probably replace it in total if autocomplete and tags had the ajax.data capability.

No rush, but just trying to determine if I should focus on my custom plugin or wait for the next iteration of the autocomplete and tags field types!

allan

Your post has prompted me to look at this properly - there is already a concept of this in the Dropdown control I wrote for these fields in Editor, however, it isn't yet exposed. Is it just static key/values that you want to attach to the data object sent to the server? That shouldn't be a problem to add.

Allan

Loren Maxwell

Would be great if it allowed something like this:

new DataTable.Editor({
    ajax: '/api/data',
    fields: [{
        label: 'Counties:',
        name: 'county',
        type: 'tags',
        ajax: {
            url: '/api/counties',
            data: {
                state: 'Texas',
                yet_another_param: function () {
                    let foo = 42
                    return foo
                }
            }
    }],
    // ...
})

allan

Committed . That functionality will be in 2.4.1 which I'll release shortly (hopefully later today).

It will be under ajaxData rather than a nested object - e.g. the above would be:

new DataTable.Editor({
  ajax: "/api/data",
  fields: [
    {
      label: "Counties:",
      name: "county",
      type: "tags",
      ajax: "/api/counties",
      ajaxData: {
        state: "Texas",
        yet_another_param: function () {
          let foo = 42;
          return foo;
        },
      },
    },
  ],
  // ...
});

Allan

Loren Maxwell

Thanks, @allan!

This will (at least for me) greatly enhance autocomplete and tags!

Loren Maxwell

@allan -- after some incorporation into my current forms and testing, I have two more requests for the dropdown control

1) The Bootstrap floating labels is not taking effect on that input
2) Provide a way to change the AJAX request from 'Post' to 'Get'

On that last note, not to second guess but to understand -- I'm curious about the choice to implement sending additional data through the ajaxData rather than recycle the current -inst ajax used for tables and have the ability to set those options in a similar way..

I'm sure there's much more to consider than what I'm thinking of, but I was just surprised to see the ajaxData option added rather then the -inst ajax.

---

On a slightly separate but related note, my favorite upgrade from Editor 1.x to 2.0 was the DataTable-as-an-input, but the one thing I disliked is the amount of space it takes up on a form, especially when a form has several of those.

The custom control I had started (which is not completely functional and looks like it was programmed by an amateur, because it was ) places a DataTable-as-an-input into a Bootstrap dropdown to get something close to what I'm looking for, but I was thrilled to see the autocomplete and tags essentially doing the same thing.

Anyway, I'm glad to see these field types incorporated as out-of-the-box options for Editor and I'm hopeful the ultimate vision for them is to have them as a fully functioning DataTable-as-an-input but in a dropdown!

allan

Hi Loren,

I did consider allowing ajax to be specified as an object, and decided that I will offer that as an option in future, but there are a lot of moving pieces there that need to be accounted for and to expedite the release I though I'd just extend the already existing internal ajaxData option. At the moment to change to GET you'd need to modify the Editor code to tweak that option.

1) The Bootstrap floating labels is not taking effect on that input

Not something I tested - didn't think of it! I'll take a look when I'm back in the office next week.

2) Provide a way to change the AJAX request from 'Post' to 'Get'

Will be part of the support for ajax as an object.

I'm hopeful the ultimate vision for them is to have them as a fully functioning DataTable-as-an-input but in a dropdown!

It is a DataTable in the dropdown as it happens . Additional table functionality could be exposed in future field types or versions. If there is something specific about the table UI that you'd like to see in the dropdown, I'd be interested to know. I've gone to some lengths to hide the table aspect of it thus far.

Allan

Loren Maxwell

Thanks, @allan -- and please know I greatly appreciate you adding the ajaxData option to expedite the release just to appease a particular fussy person in the forums!

I did see that it's a DataTable in the DropDown -- that's why I was surprised the DataTable itself is not exposed for the ajax options, however . . .

I've gone to some lengths to hide the table aspect of it thus far.

This is interesting -- there is a natural tension between flexibility and simplicity, but I think to fully expose the DataTable like is done for the DataTabes-as-an-input would be better.

Or at least have the option to do so.

Aside from the ajax options I've mentioned, I could be interested in ordering the table in the Dropdown or seeing the info for the number of records, or performign a rowGroup on those options, etc., not to mention the ability to open another Editor window to add a record to the joined table, etc.

Please remember I am an amateur programmer, so I have very little idea how difficult any of this is to do, so perhaps it's more complicated than what I think.

But to have a strong default configuration for the DataTable in the DropDown, like you do, and also making it possible access the DataTable itself through a config option and .dt() like the DataTable-as-an-input would make it a much more powerful field.

At least for my purposes!

allan

I wanted the dropdown list to be a basic list, but also be sorted and searchable, which is why I hid a lot of the DataTables aspects (e.g. the table header) while utalising them underneath. I haven't considering row groups before - that would be a good way of doing something like an optgroup, thanks for the suggestion. Multiple columns for more complex data I did consider, but thought I'd come back to at a later date!

Allan

Loren Maxwell

Thanks, @allan -- it's an excellent addition and I look forward to seeing the increased functionality!

Loren Maxwell

@allan -- using this thread to annotate areas I think the autocomplete and tags might have additional functionality.

Sorting
I mentioned previously the ability to sort and I have a concrete example for your consideration.

The default sorting on the label is asc and it doesn't appear that can be overwritten.

I have a sports research site where users enter games and the first field on the form (a tag) is the season in which the game was played.

During the current season users are mostly concerned with entering a game from the current, but if they type '2' then '2025' is the last on the list, so they have to continue to type.

Typed '2'

List
2000
2001
2002
...
2025

Typed '202'

List
2020
2021
2022
...
2025

If I had the ability to sort desc then they could type '2' and down arrow to select the current season and be done.

Typed '2'

List
2025
2024
2023
...

Wrap around navigation
Similarly, I’d suggest pressing the up arrow from the input should move focus to the last item in the dropdown. Additionally, the up/down arrows should allow navigation to wrap around, moving from the last item to the first and vice versa.

allan

Excellent ideas - thank you for both. I've put them into my tracker for addition to Editor .

Allan

Loren Maxwell

Just a quick amendment based on some more experimenting:

Wrap around navigation
* The up/down arrows should allow navigation to wrap around, to include the input
** Arrow down from the input moves to the first record
** Arrow up from the first record moves to the input
** Arrow up from the input moves to the last record
** Arrow down from the last record moves to the input