jQuery in-place-editor to use jQuery autocomplete input field
-
05-07-2021 - |
سؤال
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!
المحلول
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.