Jediitable, autocomplete 및 autogrow jquery가 작동하지 않습니다.

Question

Jeditable jquery 플러그인에서 자동 완성 및 자동 증가를 사용하려고하는데이 두 가지를 통합 할 수 없습니다. 현재 Jeditable + 자동 완성 기능이 완벽하게 작동합니다. 자동 증가를위한 코드를 추가하기 위해 tr을 사용하면 작동하지 않으며 저장 버튼을 눌렀을 때 포스트가 다시 생깁니다. 어떤 도움을 주시면 감사하겠습니다. 내가 찍었을이 문제로 실행 분들을 위해

1. Jeditable
2. Jeditable - Auto Grow Tutorial

Answer 1

: 여기

$('#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 
     } 
    }); 

몇 가지 참고 자료입니다 :

이

내가 지금까지 무엇을 가지고 그것은 작동합니다. 자그마한 결과가 나왔기 때문에 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 
       } 
      });