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

Take a look at this

JQuery Based Inplace Editing + AutoComplete

Usage

$('#edit').editable( 'echo.php', // POST URL to send edited content
    { indicator : , // options for jeditable 
        event: 'click'      // check jeditable.js for more options
    },
    { url: "search.php", //url form where autocomplete options will be extracted
        minChars: 1, // check autocomplete.js for more options
        formatItem:formatItem,
        selectOnly: 1,
        inputSeparator:';' // a new option of inputSeparator was introduced. 
    }
);

You can use ',' as input separator.

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"]
    }
});