可编辑、自动完成和自动增长的jquery不工作

Question

我试图使用自动完成和自动增长与可编辑的jquery插件，似乎不能合并两者。我目前有可编辑的+自动完成工作完美。当我尝试为自动增长添加代码时，它不起作用，当我点击保存按钮时，会导致一个帖子返回。如有任何帮助，不胜感激。

这是我目前为止写的:

    $('#directionList').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '../api/standarddirections/?q=' + request.term,
                dataFilter: function (data) { return data; },
                success: response
            });
        },
        minLength: 2
    });
    $.editable.addInputType('autocomplete', {
        element: $.editable.types.textarea.element,
        plugin: function (settings, original) {
            $('textarea', this).autocomplete(settings.autocomplete);
        }
    });
    $(".directionAutoComplete").editable(function (value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
        return (value);
    }, {
        type: "autocomplete",
        indicator: 'Saving...',
        tooltip: "Enter a direction...",
        onblur: function (value, settings) {
            console.log(this);
            console.log(value);
            console.log(settings);
            return (value);
        },
        cancel: 'Cancel',
        submit: 'Save',
        autocomplete: {
            source: function (request, response) {
                $.ajax({
                    url: '../api/standarddirections/?q=' + request.term,
                    dataFilter: function (data) { return data; },
                    success: response
                });
            },
            minLength: 2
        }
    });

这里有一些参考资料:

1. Jeditable
2. 可编辑-自动生长教程

Answer 1

对于那些遇到这个问题的人，我已经让它工作了。我选择了growfield插件，只是因为自动增长插件有一些奇怪的结果(它工作了，但是当我保存它时格式看起来很差，所以我只是选择了使用不同插件的更容易的路线。)

这是我最后的代码:

$.editable.addInputType('growfield', {
                element: function (settings, original) {
                    var textarea = $('<textarea>');
                    if (settings.rows) {
                        textarea.attr('rows', settings.rows);
                    } else {
                        textarea.height(settings.height);
                    }
                    if (settings.cols) {
                        textarea.attr('cols', settings.cols);
                    } else {
                        textarea.width(settings.width);
                    }
                    // will execute when textarea is rendered
                    textarea.ready(function () {
                        // implement your scroll pane code here
                    });
                    $(this).append(textarea);
                    return (textarea);
                },
                plugin: function (settings, original) {
                    // applies the growfield effect to the in-place edit field
                    $('textarea', this).growfield(settings.growfield);
                    $('textarea', this).autocomplete(settings.autocomplete);
                }
            });
 $(".directionAutoComplete").editable(function (value, settings) {
                console.log(this);
                console.log(value);
                console.log(settings);
                return (value);
            }, {
                type: "growfield",
                indicator: 'Saving...',
                tooltip: "Enter a direction...",
                onblur: function (value, settings) {
                    console.log(this);
                    console.log(value);
                    console.log(settings);
                    return (value);
                },
                cancel: 'Cancel',
                submit: 'Save',
                growfield: {},
                autocomplete: {
                    source: function (request, response) {
                        $.ajax({
                            url: '../api/standarddirections/?q=' + request.term,
                            dataFilter: function (data) { return data; },
                            success: response
                        });
                    },
                    minLength: 2
                }
            });