inplaceeditor + autocompleter

[lskatz]

Hi,
Is there an easy way to get an inplaceeditor with an autocompleter?
I want to be able to click some text and have the inplaceeditor pop
up, but also have the autocompleter on it.
Thanks.

[lskatz]

Ok maybe this is too hard... is there some kind of parameter/function
that I can put into the inplaceeditor that is activated when the
inplaceeditor is created? If that is the case, then I can create the
autocompleter when the inplaceeditor is made. Thanks.

[Takanori Ishikawa]

Hi,

InPlaceEditor invoke createEditField method for creating its textField
element.
So you can instantiate InPlaceEditor and override the
createEditField() method
with something like this:

var editor = new Ajax.InPlaceEditor('editme', '#');

Object.extend(editor, {
_createEditField: editor.createEditField,
createEditField: function() {
this._createEditField();
new Autocompleter.Local(this.editField, 'band_list', ['ABBA',
'AC/DC', 'Aerosmith', 'America'], {});
}
});

[lskatz]

Thanks a million. This looks like it's about to work.

On Jul 15, 5:13 am, Takanori Ishikawa <takanori.ishik...@gmail.com>
wrote:

[lskatz]

Ok I think that the major problem I am having now is that the editor
field does not have an id, and I need an id for the autocompleter. My
code is below... any help please?

My javascript error (in firefox) is
Error: this.element has no properties
Source File: /javascript/scriptaculous/controls.js
Line: 59

// add in the inplaceeditor for the name field
var editor=new Ajax.InPlaceEditor('name' + hoursId,'changeHour.php',{
okButton:false,
submitOnBlur:true,
formId:'ajaxForm',
callback:function(form,value){
var request="hoursId=" + hoursId + "&which=name&username=" + value;
return request;
},

});
Object.extend(editor, {
_createEditField: editor.createEditField,
createEditField: function() {
this._createEditField();

new Autocompleter.Local(this.editField.id,'name' + hoursId,
'employeeSuggestion.php',{
'minChars':1,
});

}
});

[Christophe Porteneuve]

lskatz a écrit :

> Ok I think that the major problem I am having now is that the editor
> field does not have an id, and I need an id for the autocompleter. My
> code is below... any help please?

Hang on a minute: if your editor field didn't have an ID, you wouldn't
be able to bind an IPE on it. In your code, it does have an ID: 'name'
+ hoursId, it appears...

So you could very well bind your AC over it. Do note, however, that you
may end up having conflictual key bindings between IPE and AC. e.g. Esc
and Return are used by both, so there's no telling how it would react
then...

[lskatz]

> Hang on a minute: if your editor field didn't have an ID, you wouldn't
> be able to bind an IPE on it. In your code, it does have an ID: 'name'
> + hoursId, it appears...

This is the ID for the div that the IPE will appear over. The problem
is that the IPE's input field does not have an ID that I can use while
using Takanori Ishikawa's suggestion.

[Takanori Ishikawa]

Hi.

Autocompleter constructor just uses $() function for lookup element.
So it's OK to pass element itself as first parameter.

createEditField: function() {
this._createEditField();
new Autocompleter.Local(this.editField, ...);

[lskatz]

> Autocompleter constructor just uses $() function for lookup element.
> So it's OK to pass element itself as first parameter.

This isn't working either, but there are no javascript errors.
Could it be a problem with the page I'm calling on the autocompleter?
I have the php code below, followed by the JS

<?
// employeeSuggestion.php

$tmp="<ul><li>ddddddddd</li></ul>";
print $tmp;
?>

// add in the inplaceeditor for the name field
var editor=new Ajax.InPlaceEditor('name' + hoursId,'changeHour.php',{
okButton:false,
submitOnBlur:true,
formId:'ajaxForm',
callback:function(form,value){
var request="hoursId=" + hoursId + "&which=name&username=" + value;
return request;
},
});
Object.extend(editor, {
_createEditField: editor.createEditField,
createEditField: function() {
this._createEditField();

new Autocompleter.Local(this.editField,'name' + hoursId,

[Pomidor]

I'm not sure, but you are using non local autocomplete. Try to create
new Autocompleter(...) instead of new Autocompleter.Local(...)

[Pomidor]

Ooops, some mistakes in previous post.
Try new Ajax.Autocompleter(...)
It's correctly work.

[lskatz]

Sweet, thanks! Just for the record, this is what officially works for
me:

var editor=new Ajax.InPlaceEditor('name' + hoursId,'changeHour.php',{
okButton:false,
submitOnBlur:true,
formId:'ajaxForm',
callback:function(form,value){
var request="hoursId=" + hoursId + "&which=name&username=" + value;
return request;
},
});
Object.extend(editor, {
_createEditField: editor.createEditField,
createEditField: function() {
this._createEditField();

new Ajax.Autocompleter(this.editField,'name' + hoursId,