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插件只是因爲自動增長插件有一些奇怪的結果（它可以工作，但是當我保存它時，格式化會關閉，所以我只選擇了使用不同插件的更簡單的路線）。

這裏是我的最終代碼：

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