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

以下是一些参考资料：

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

Jediitable，autocomplete和autogrow jquery无法正常工作

1 个答案: