AutoComplete selection not sending correct value to server

keith.abramo

I'm using the editor autocomplete plugin with inline editing. My source is just an array of objects with label and value properties. When I type to search for my item and then click on it in the dropdown, the value which gets passed to "preSubmit" and thus my server for saving is only what I typed into the textbox and not the selected value I chose.

So for example if I typed "9" and selected "1985" from the dropdown. My preSubmit data will show "9" for the value of that field instead of the correct "1985". Is this something that has been seen before? I'm not sure why this is happening.

Any help would be great.

keith.abramo

Further information:

This seems to be happening because I have onBlur set to "submit". My guess is the act of clicking on an item in the dropdown is causing the focus to blur off the input element and it does not have time to update the input element before firing the submit workflow.

Is there a way to remedy this? This does not seem to happen with the datepicker field types so I'm hoping this is an easy fix.

allan

Hi Keith,

This function in the autoComplete plug-in should stop that:

    owns: function ( conf, node ) {
        if ( $(node).closest('ul.ui.autocomplete').length ) {
            return true;
        }
        return false;
    },

Could you confirm that your copy of the plug-in has that function? It might also be worth checking that the dropdown has the classes ui and autocomplete. Finally, what version of Editor are you using?

Thanks,
Allan

keith.abramo

Hey Allan,

Yes my version of the plugin has that function as it is written in your comment. I'm using editor 1.9.0

allan

Thanks for the updates. Are you able to give me a link to your page so I can check it out please?

Thanks,
Allan

keith.abramo

I am not able to provide a link unfortunately. It is an internal project. Could you explain how the "owns" function plays into the functionality of the autocomplete plugin? Maybe from there I can get an idea of what may be happening.

Much appreciated.

keith.abramo

Hey Allan,

I believe I found a bug. In your code. This did not fix my issue though. My owns function does not seem to get called when selecting an item in autocomplete.

Anyways, here is a fix I think you still need in this plugin: In your 'owns' function you are looking for "ul.ui.autocomplete" but it should be "ul.ui-autocomplete". notice the '.' where a '-' should be in the class name.

I'm testing in IE11 and Chrome. My source is a javascript array of strings. Nothing crazy as far as that goes.

• Keith

allan

Thank you - I agree and I've committed a fix for that issue.

I'll need to get back to you about the fact that it still isn't working with that though - I've not been able to recreate that error locally.

What version of jQuery UI are you using please?

Allan

keith.abramo

I'm using the latest 1.12.1

Yea, I'm not not sure when the 'owns' function is supposed to fire, but it seems to only fire when I click on certain wrapper element on the datatable.

keith.abramo

Hey Allan,

I found a workaround to get autocomplete to work. I was looking at the jquery ui autocomplete documentation for the focus event and saw this snippet.

"The default action is to replace the text field's value with the value of the focused item, though only if the event was triggered by a keyboard interaction"

I figured, it would be nice to have that set my text on mouse hover so I did this:

    name: "ShipTo",
    type: "autoComplete",
    opts: {
         source: shipToVendors,
         minLength: 0,
         focus: function (event, ui) {
                $(this).val(ui.item.value);
         }
    }

This sets the text on hover so by the time I click on an item the input has the correct value already.

However, the big picture issue here is the interaction should be how it is on the datetime fields. Where once I click an item in the widget, it should set focus back to the input element and wait for me to move away from that cell before submit happens. Currently autocomplete plugin is submitting my inline edit row on autocomplete selection.

I hope this helps and I hope to see a fix for this in the near future. I know you have said in other forum posts that autocomplete has proven unreliable and difficult to plug into datatables, but I still find it less invasive than select2 so I hope it stays in the datatable editor ecosystem.

allan

Interesting - thanks for posting back with your findings. It is frustrating that jQuery UI AutoComplete doesn't really appear to have made a split between the label and the value selected fully. I don't plan to axe the plug-in from Editor, but I also don't really plan to develop it much further other than maintenance.

At some point (probably not too far away) I'm going to pick one of the select enhancing plug-ins and focus on that in Editor - probably not built in, but showing examples and documenting it more extensively. The balance there is that we don't have the bandwidth to support third party libraries as well as our own!

Allan