editableTableWidget具有自动完成

Question

我有一个html表与editableTableWidget，所以我可以改变一个单元格的内容，我已经建立了一个ajax调用，所以数据库也被改变了。 现在客户想要一个autocomplete函数。我之前使用过自动完成功能，但只在html form元素上使用，如text或textarea 我对文本名称做了什么？

这里是代码的例子：

$("#Name-of-Text").autocomplete({source: NN}); 

的editableTableWidget有text场，但没有名称或ID。

$.fn.editableTableWidget = function (options) { 
    'use strict'; 
    return $(this).each(function() { 
     var buildDefaultOptions = function() { 
       var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions); 
       opts.editor = opts.editor.clone(); 
       return opts; 
      }, 
      activeOptions = $.extend(buildDefaultOptions(), options), 
      ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9, 
      element = $(this), 
      editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()), 
      active, 
      showEditor = function (select) { 
       active = element.find('td:focus'); 
       if (active.length) { 
        editor.val(active.text()) 
         .removeClass('error') 
         .show() 
         .offset(active.offset()) 
         .css(active.css(activeOptions.cloneProperties)) 
         .width(active.width()) 
         .height(active.height()) 
         .focus(); 
        if (select) { 
         editor.select(); 
        } 
       } 
      }, 
      setActiveText = function() { 
       var text = editor.val(), 
        evt = $.Event('change'), 
        originalContent; 
       if (active.text() === text || editor.hasClass('error')) { 
        return true; 
       } 
       originalContent = active.html(); 
       active.text(text).trigger(evt, text); 

       var id = active.attr('data-id'); 
       var Resultaat = Opslaan(id, text); 
       //alert(Resultaat); 

       if (evt.result === false) { 
        active.html(originalContent); 
       } 
      }, 
      movement = function (element, keycode) { 
       if (keycode === ARROW_RIGHT) { 
        return element.next('td'); 
       } else if (keycode === ARROW_LEFT) { 
        return element.prev('td'); 
       } else if (keycode === ARROW_UP) { 
        return element.parent().prev().children().eq(element.index()); 
       } else if (keycode === ARROW_DOWN) { 
        return element.parent().next().children().eq(element.index()); 
       } 
       return []; 
      }; 
     editor.blur(function() { 
      setActiveText(); 
      editor.hide(); 
     }).keydown(function (e) { 
      if (e.which === ENTER) { 
       setActiveText(); 
       editor.hide(); 
       active.focus(); 
       e.preventDefault(); 
       e.stopPropagation(); 
      } else if (e.which === ESC) { 
       editor.val(active.text()); 
       e.preventDefault(); 
       e.stopPropagation(); 
       editor.hide(); 
       active.focus(); 
      } else if (e.which === TAB) { 
       active.focus(); 
      } else if (this.selectionEnd - this.selectionStart === this.value.length) { 
       var possibleMove = movement(active, e.which); 
       if (possibleMove.length > 0) { 
        possibleMove.focus(); 
        e.preventDefault(); 
        e.stopPropagation(); 
       } 
      } 
     }) 
     .on('input paste', function() { 
      var evt = $.Event('validate'); 
      active.trigger(evt, editor.val()); 
      if (evt.result === false) { 
       editor.addClass('error'); 
      } else { 
       editor.removeClass('error'); 
      } 
     }); 
     element.on('dblclick', showEditor) 
     .css('cursor', 'pointer') 
     .keydown(function (e) { 
      var prevent = true, 
       possibleMove = movement($(e.target), e.which); 
      if (possibleMove.length > 0) { 
       possibleMove.focus(); 
      } else if (e.which === ENTER) { 
       showEditor(false); 
      } else if (e.which === 17 || e.which === 91 || e.which === 93) { 
       showEditor(true); 
       prevent = false; 
      } else { 
       prevent = false; 
      } 
      if (prevent) { 
       e.stopPropagation(); 
       e.preventDefault(); 
      } 
     }); 

     element.find('td').prop('tabindex', 1); 

     $(window).on('resize', function() { 
      if (editor.is(':visible')) { 
       editor.offset(active.offset()) 
       .width(active.width()) 
       .height(active.height()); 
      } 
     }); 
    }); 

}; 

Answer 1

过了一段时间，但它是那么容易......

只要把.autocomplete呼叫转移到editableTableWidget后面。

$('#tbl1, #tbl2, #tbl3').editableTableWidget({ 
    editor: $('<input>').autocomplete({ 
    source: "ajax_autocomplete.php", 
    minLength: 2 
    }); 
}); 

我已经回答了我自己的问题，有人前来谷歌搜索。