Jediitable，自动完成和自动增长的jQuery不起作用

Question

我正在尝试将自动完成和自动增长与 Jeditable jquery 插件一起使用，但似乎无法将两者结合起来。我目前的 Jeditable + 自动完成功能完美。当我为自动增长添加代码时，它不起作用并在我点击保存按钮时导致回发。任何帮助将不胜感激。

这是我目前所拥有的：

    $('#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. Jeditable - Auto Grow Tutorial

Answer 1

对于那些遇到这个问题的人，我已经让它工作了。我选择了 growfield 插件，只是因为 autogrow 有一些奇怪的结果（它可以工作，但是当我保存它时格式看起来不对，所以我选择了使用不同插件的更简单的方法。）

这是我的最终代码：

$.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
                }
            });