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

Question

背景

创建一个使用 Dave Hauenstein 的 edit-in-place 和 jQuery 的 autocomplete 插件的所见即所得编辑器。

源代码

代码包含以下部分：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 元素时调用函数。返回的值用于为文本输入字段设定种子。理论上，插件应该将 DOM 中的 span 元素替换为类似于以下内容的 input 元素：

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

自动完成

自动完成代码：

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

问题

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

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

问题

您将如何集成这两个插件，以便当用户单击就地编辑字段时，自动完成代码在就地编辑添加的 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函数改为调用create函数：

  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 sn-p 和以前一样。对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 '';
    }
  });

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