Working example of jeditable and autocomplete working together

Question

I see a lot of google posts on this but all seems to be talking about how this is in progress. Does anyone know of a working version of jeditable and autocomplete functionality working together so i can click on text and get a textbox and have autocomplete functionality working against that textbox

---

EDIT: I am opening a bounty, as it still seems like none of these solutions replicate Stack overflow tags + jeditable where i can use jeditable to get a editable texbox after clicking on text and then be able to enter a comma separated list that autocomplete each entry as i type (similar to entering tags in stack overflow).

Answer 1

Editable: jQuery jeditable I've used it recently in my project (as such and with slight modification to work with page methods)

AutoComplete: bassistance

Answer 2

This is exactly what Jeditable custom inputs are for. Check quick and dirty working demo (start typing something starting with letter a).

Demo was done in 5 lines of code. It uses Jörn Zaefferer's Autocomple plugin for autocompletion:

$.editable.addInputType('autocomplete', {
    element : $.editable.types.text.element,
    plugin : function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.data);
    }
});

Then you can call Jeditable with something like:

$(".autocomplete").editable("http://www.example.com/save.php";, {
    type      : "autocomplete",
    tooltip   : "Click to edit...",
    onblur    : "submit",
    autocomplete : {
        multiple : true,
        data     : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
    }
});

Answer 3

I had the need for the same functionality with jeditable and autocomplete from bassistance, for a list of emails separated by a comma. So, I changed the demo from Mika Tuupola and had it working like this:

$.editable.addInputType('autocomplete', {
    element: $.editable.types.text.element,
    plugin: function(settings, original) {
        $('input', this).autocomplete(settings.autocomplete.urlOrData,
            settings.autocomplete.options);
    }
});

And when you call jEditable you need to add the following:

$('.autocomplete').editable('http://www.example.com/save', {
    type: 'autocomplete',
    autocomplete: {
        urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
        options: {
            multiple: true
        }
    }
});

The basic thing to understand here is that when you call $('input', this).autocomplete(...) you are actually applying the autocomplete plugin functionality to the editable input, and that's where you must pass the autocomplete options, via the settings object, which is the same as the settings you pass to jeditable.