Working example of jeditable and autocomplete work

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

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 2

Combining it with jQuery UI isn't much different to Mika's example above. This works for me

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

  $(".autocomplete").editable("http://www.example.com/save.php", {
      type      : "autocomplete",
      tooltip   : "Click to edit...",
      onblur    : "submit",
      autocomplete : {
          minLength  : 2,
          source     : ["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.

Answer 4

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 5

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 6

Complete working integration of dataTable, dataTables editable (legacy), jEditable, autocomplete jQuery plugins with AJAX source and results updated at bottom on page(i.e. appended to body of html) is solved by:

$.editable.addInputType('autocomplete', {
            element: $.editable.types.text.element,
            plugin: function(settings, original) {
                var $row = $(this).closest('tr').prop('id');
                settings.autocomplete.appendTo = "#results-"+$row;
                $('input', this).autocomplete(settings.autocomplete);
            }
        });

Datatable legacy editable code:

{
  tooltip: 'Click to update Owner',
  type: 'autocomplete',
  autocomplete: {
                  serviceUrl: './search/users/by/name',
                  minChars: 5,
                  paramName: 'username',
                  dataType: 'json'
  },
  cancel : 'Cancel',
  submit : 'Submit',
}

TD in table have:

<td id="results-${obj.taskId}">