Editor with autocomplete plugin - disappears when selected

8ZyfGVg

Hi, I am having some problems with the jQuery UI AutoComplete plugin.
I have come up with a sample file that reproduces my problem.
Basically I got the autocomplete to show me the suggestions, but when I select them it will simply disappear and bring the table back to its original state. All other fields update works just fine.

I am using the JQuery 1.9 and JQuery-UI 1.10
Here is my code.

editor = new $.fn.dataTable.Editor({
                        data: dataSet,
                        table: "#example",
                        fields: [{
                            label: "First name:",
                            name: "first_name"
                        }, {
                            label: "Last name:",
                            name: "last_name"
                        }, {
                            label: "Position:",
                            name: "position",
                                type: "autoComplete",
                    opts: {
                        source: ['job1', 'job2', 'job3', 'job4']
                    }
                        }, {
                            label: "Office:",
                            name: "office"
                        }, {
                            label: "Extension:",
                            name: "extn"
                        }, {
                            label: "Start date:",
                            name: "start_date",
                            type: "datetime"
                        }, {
                            label: "Salary:",
                            name: "salary"
                        }
                        ]
                    });

                    // Activate an inline edit on click of a table cell
                    $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
                        editor.inline(this);
                    });

                    var dataSet = [{ "DT_RowId": "row_1", "first_name": "Tiger", "last_name": "Nixon", "position": "System Architect", "email": "t.nixon@datatables.net", "office": "Edinburgh", "extn": "5421", "age": "61", "salary": "320800", "start_date": "2011-04-25" }, { "DT_RowId": "row_2", "first_name": "Garrett", "last_name": "Winters", "position": "Accountant", "email": "g.winters@datatables.net", "office": "Tokyo", "extn": "8422", "age": "63", "salary": "170750", "start_date": "2011-07-25" }];
                    $(document).ready(function () {
                        $('#example').DataTable({
                            data: dataSet,
                            columns: [
            {
                data: null, render: function (data, type, row) {
                    // Combine the first and last names into a single table field
                    return data.first_name + ' ' + data.last_name;
                }
            },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
                            ],
                            select: true,
                            buttons: [
                                { extend: "create", editor: editor },
                                { extend: "edit", editor: editor },
                                { extend: "remove", editor: editor }
                            ]
                        });
                    });
                });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Are you able to give me a link to your page so I can check it out and try to figure out what is going wrong please?

Allan

8ZyfGVg

http://apptest.ecoresource.ca

allan

Thanks! Could you add the following two methods into the Editor plug-in for AutoComplete:

    canReturnSubmit: function ( conf, node ) {
        if ( $('ul.ui-autocomplete').is(':visible') ) {
            return false;
        }
        return true;
    },

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

Just before the // Non-standard Editor method - custom to this plug-in comment should do it.

Allan

8ZyfGVg

done, but the problem still persists.

allan

Sorry! This:

if ( $(node).closest('ul.ui.autocomplete').length ) {

should be:

if ( $(node).closest('ul.ui-autocomplete').length ) {

Allan

8ZyfGVg

It is there, but no change on the result.

8ZyfGVg

Sorry, disregard this last post.
It works.

Thanks Allan!!!