javascript - jeditable 和 autocomplete 一起工作的工作示例

Question

我看到很多关于此的谷歌帖子，但似乎都在谈论这是如何进行的。有谁知道 jeditable 和自动完成功能的工作版本一起工作，所以我可以单击文本并获取一个文本框并让自动完成功能针对该文本框工作

---

编辑：我正在打开一个赏金，因为似乎这些解决方案都没有复制堆栈溢出标签+ 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örn 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 的可编辑和自动完成功能相同的功能，以获取以逗号分隔的电子邮件列表。所以，我改变了 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(...) 时，您实际上是将自动完成插件功能应用于可编辑输入，这就是您必须传递自动完成选项的地方，通过设置对象，它与您传递给 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、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 有：

<td id="results-${obj.taskId}">