工作实例jeditable和自动完成协同工作(Working example of jeditabl

我看到很多关于这一点，但谷歌的所有职位似乎是在谈论如何，这是正在进行中。有谁知道的jeditable和自动填充功能一起工作，所以我可以点击文本，并得到一个文本框，并具有自动填充功能针对文本工作的工作版本

编辑：我打开一个赏金，因为它仍然好像这些解决方案的复制堆栈溢出标签+ jeditable在那里我可以使用jeditable点击文字后得到一个可编辑texbox，然后可以输入一个逗号分隔的列表，自动完成各条目i型（类似于堆栈溢出进入标签）。

Answer 1:

看看这个

基于JQuery的就地编辑+自动完成

用法

$('#edit').editable( 'echo.php', // POST URL to send edited content
    { indicator : , // options for jeditable 
        event: 'click'      // check jeditable.js for more options
    },
    { url: "search.php", //url form where autocomplete options will be extracted
        minChars: 1, // check autocomplete.js for more options
        formatItem:formatItem,
        selectOnly: 1,
        inputSeparator:';' // a new option of inputSeparator was introduced. 
    }
);

您可以使用“”作为输入分隔符。

Answer 2:

这正是Jeditable定制输入是。检查快速和肮脏的工作演示（开始输入的东西开始字母）。

演示是在5行代码来完成。它采用乔恩Zaefferer的Autocomple插件的自动完成：

$.editable.addInputType('autocomplete', {
    element : $.editable.types.text.element,
    plugin : function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.data);
    }
});

然后，你可以调用Jeditable喜欢的东西：

$(".autocomplete").editable("http://www.example.com/save.php";, {
    type      : "autocomplete",
    tooltip   : "Click to edit...",
    onblur    : "submit",
    autocomplete : {
        multiple : true,
        data     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
    }
});

Answer 3:

我有与bassistance jeditable和自动完成相同的功能的需要，对用逗号分隔的电子邮件列表。所以，我从米卡Tuupola改变了演示，并就它的工作是这样的：

$.editable.addInputType('autocomplete', {
    element: $.editable.types.text.element,
    plugin: function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.urlOrData,
            settings.autocomplete.options);
    }
});

当你骂jEditable你需要添加以下内容：

$('.autocomplete').editable('http://www.example.com/save', {
    type: 'autocomplete',
    autocomplete: {
        urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
        options: {
            multiple: true
        }
    }
});

基本的东西在这里明白的是，当你调用$（“输入”，这一点）.autocomplete（......），你实际是在可编辑输入的自动完成插件功能，而这也正是你必须通过自动完成选项，通过设置对象，这是一样的，你传递给jeditable设置。

Answer 4:

编辑： jQuery的 jeditable我最近用它在我的项目（如例如和稍加修改与网页的方法来工作）

自动完成： bassistance

Answer 5:

与jQuery UI结合它不是上面Mika的例子太多不同。这对我的作品

  $.editable.addInputType('autocomplete', {
      element : $.editable.types.text.element,
      plugin : function(settings, original) {
          $('input', this).autocomplete(settings.autocomplete);
      }
  });

  $(".autocomplete").editable("http://www.example.com/save.php", {
      type      : "autocomplete",
      tooltip   : "Click to edit...",
      onblur    : "submit",
      autocomplete : {
          minLength  : 2,
          source     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
      }
  });

Answer 6:

dataTable中，数据表可编辑的（传统）的完整的工作整合，jEditable，用AJAX源和结果在页面（即附加到HTML的身体）在底部更新自动完成的jQuery插件被解决：

$.editable.addInputType('autocomplete', {
            element: $.editable.types.text.element,
            plugin: function(settings, original) {
                var $row = $(this).closest('tr').prop('id');
                settings.autocomplete.appendTo = "#results-"+$row;
                $('input', this).autocomplete(settings.autocomplete);
            }
        });

DataTable的遗留代码编辑：

{
  tooltip: 'Click to update Owner',
  type: 'autocomplete',
  autocomplete: {
                  serviceUrl: './search/users/by/name',
                  minChars: 5,
                  paramName: 'username',
                  dataType: 'json'
  },
  cancel : 'Cancel',
  submit : 'Submit',
}

TD表有：