Friday, September 28, 2012

JQuery in place editing with autocomplete (with dummy data)

Pick the corresponding libraries from here : 

Then edit the file named : jquery.editinplace.js like this ; 

(Modify) createEditorElement: function() {
if (-1 === $.inArray(this.settings.field_type, ['autocomplete','text', 'textarea', 'select']))
throw "Unknown field_type <fnord>, supported are 'text', 'autocomplete','textarea' and 'select'";
var editor = null;
if ("select" === this.settings.field_type)
editor = this.createSelectEditor();
else if ("autocomplete" === this.settings.field_type)
editor = this.createAutoCompleteEditor();
else if ("text" === this.settings.field_type)
editor = $('<input type="text" ' + this.inputNameAndClass() 
+ ' size="' + this.settings.text_size  + '" />');
else if ("textarea" === this.settings.field_type)
editor = $('<textarea ' + this.inputNameAndClass() 
+ ' rows="' + this.settings.textarea_rows + '" '
+ ' cols="' + this.settings.textarea_cols + '" />');
return editor;
},

(Add) createAutoCompleteEditor: function() {
var editor = $("<input "+this.inputNameAndClass()+" type=\"text\"/>");
   editor.autocomplete({
        minChars: 1,data: [
            ['apple', 1],
            ['apricot', 2],
            ['pear', 3],
            ['prume', 4],
            ['Doyenn√© du Comice', 5]
        ]
    });
return editor;
},

Now, modify the dummy data with real data and specify field_type as autocomplete when creating an inPlaceEdit element.

No comments:

Blog Archive