jQuery就地編輯器使用jQuery自動完成輸入字段

Question

背景

創建一個使用Dave Hauenstein的就地編輯和jQuery 自動完成插件的WYSIWYG編輯器。

源代碼

代碼包含以下部分：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代碼片段。

題

如何集成這兩個插件，以便當用戶單擊“就地編輯”字段時，自動完成代碼在通過編輯添加的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代碼段與以前一樣。 對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 '';
    }
  });

只要激活就地編輯器，這就會將自動完成功能附加到就地編輯器。