jQuery in-place-editor to use jQuery autocomplete input field

Question

Background

Creating a WYSIWYG editor that uses Dave Hauenstein's edit-in-place and jQuery's autocomplete plug-in.

Source Code

The code has the following parts: HTML, edit-in-place, and autocomplete.

HTML

The HTML element that becomes an edit-in-place text field:

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

Edit In Place

The JavaScript code that uses the edit-in-place plugin:

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

The on_edit is custom code to call a function when the user clicks on the associated span element. The value returned is used to seed the text input field. In theory, the plugin should replace the span element in the DOM with an input element similar to:

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

Autocomplete

The autcomplete code:

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

Problem

It seems that the timing for the autocomplete code is incorrect with respect to the timing for the edit-in-place code.

I think that the edit-in-place plugin needs to call the autocomplete code snippet after the input field has been added to the DOM.

Question

How would you integrate the two plugins so that when a user clicks on the edit-in-place field that the autocomplete code provides autocomplete functionality on the DOM element added by edit-in-place?

Thank you!

Answer 1

Solution

Modify the jQuery in-place-editor source code by instructing the code to append an identifier onto the input field.

jQuery in-place-editor Updates

This section details the updates required.

Type Definition

Provide new attributes in the default settings:

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

inputNameAndClass

Change the inputNameAndClass function to use the editor_id setting:

  /**
   * 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

Change the replaceContentWithEditor function to call the create function:

  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 );
    }
  },

Autocomplete Coupling

The autocomplete functionality can now be activated the edit-in-place is revealed.

Combined Call

The HTML snippet remains the same as before. The new call to editInPlace resembles:

  $('#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 '';
    }
  });

This attaches the autocomplete function to the in-place-editor whenever the in-place-editor is activated.