可执行和自动完成协作的工作示例

我看到很多谷歌post，但似乎所有人都在谈论这是如何进行的。 有没有人知道可协作和自动完成function的工作版本一起工作，所以我可以点击文本并获得一个文本框，并具有针对该文本框工作的自动完成function

---

编辑：我打开一个赏金，因为它似乎仍然没有这些解决方案复制堆栈溢出标签+ jeditable我可以使用jeditable在点击文本后得到一个可编辑的texbox然后能够输入一个逗号分隔的列表，自动完成每个我键入的条目（类似于在堆栈溢出中输入标记）。

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自定义输入的用途。 检查快速和脏的工作演示 （开始输入以字母a开头的内容 ）。

演示用5行代码完成。 它使用JörnZaefferer的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和autocomplete相同的function。 所以，我改变了Mika 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 } } }); 

这里要理解的基本要点是，当你调用$（’input’，this）.autocomplete（…）时，你实际上是将自动完成插件function应用于可编辑输入，这就是你必须通过自动完成选项的地方，通过设置对象，与您传递给jeditable的设置相同。

Answer 4

可编辑： jQuery jeditable我最近在我的项目中使用过它（就像这样，稍作修改就可以使用页面方法）

自动完成： 低音

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，dataTables可编辑（遗留），jEditable，自动完成jQuery插件与AJAX源和结果更新在页面底部（即附加到html的主体）通过以下方式解决：

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

数据表旧版可编辑代码：

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

表中的TD有：