jQuery就地编辑器使用jQuery自动完成输入字段

Question

背景

创建一个所见即所得编辑器，该编辑器使用Dave Hauenstein的就地编辑和jQuery的自动完成插件。

源代码

代码包含以下部分：HTML、就地编辑和自动完成。

HTML

成为就地编辑文本字段的HTML元素：

<span class="edit" id="edit">Edit item</span>

在位编辑

使用就地编辑插件的JavaScript代码：

$('#edit').editInPlace({
url           : window.location.pathname,
hover_class   : 'inplace_hover',
params        : 'command=update-edit',
element_id    : 'edit-ac',
on_edit       : function() {
return '';
}
});

on_edit是当用户单击关联的span元素时调用函数的自定义代码。返回的值用于为文本输入字段设定种子。理论上，插件应该用类似于的input元素替换DOM中的span元素

<input type="text" id="edit-ac" />

自动完成

完整的代码：

$('#edit-ac').autocomplete({
source    : URL_BASE + 'search.php',
minLength : 2,
delay     : 25
});

问题

与就地编辑代码的时间相比，自动完成代码的时间似乎不正确。

我认为，在将input字段添加到DOM之后，就地编辑插件需要调用autocomplete代码片段。

问题

您将如何集成这两个插件，以便当用户单击edit-in-place字段时，自动完成代码在edit-in-pplace添加的DOM元素上提供自动完成功能？

谢谢！

Answer 1

解决方案

通过指示代码将标识符附加到输入字段上来修改jQuery就地编辑器源代码。

jQuery就地编辑器更新

本节详细介绍了所需的更新。

类型定义

在默认设置中提供新属性：

editor_id:    "inplace_id", // default ID for the editor input field
on_create:    null, // function: called after the editor is created

inputNameAndClass

更改inputNameAndClass功能以使用editor_id设置：

/**
* Returns the input name, class, and ID for the editor.
*/
inputNameAndClass: function() {
var result = ' name="inplace_value" class="inplace_field" ';
// DJ: Append the ID to the editor input element.
if( this.settings.editor_id ) {
result += 'id="' + this.settings.editor_id + '" ';
}
return result;
},

用编辑器替换内容

更改replaceContentWithEditor函数以调用创建函数：

replaceContentWithEditor: function() {
var buttons_html  = (this.settings.show_buttons) ? this.settings.save_button + ' ' + this.settings.cancel_button : '';
var editorElement = this.createEditorElement(); // needs to happen before anything is replaced
/* insert the new in place form after the element they click, then empty out the original element */
this.dom.html('<form class="inplace_form" style="display: inline; margin: 0; padding: 0;"></form>')
.find('form')
.append(editorElement)
.append(buttons_html);
// DJ: The input editor is part of the DOM and can now be manipulated.
if( this.settings.on_create ) {
this.settings.on_create( editorElement );
}
},

自动完成联轴器

自动完成功能现在可以激活，显示就地编辑。

组合呼叫

HTML代码段与以前相同。对editInPlace的新调用类似于：

$('#edit').editInPlace({
url           : window.location.pathname,
hover_class   : 'inplace_hover',
params        : 'command=update-edit',
editor_id     : 'edit-ac',
on_create     : function( editor ) {
$('#edit-ac').autocomplete({
source    : URL_BASE + 'search.php',
minLength : 2,
delay     : 25
});
},
on_edit       : function() {
return '';
}
});

这会在激活就地编辑器时将自动完成功能附加到就地编辑器。