Geek Answers Handbook

Working example jeditable and autocomplete working together

I see a lot of Google posts, but everyone seems to be talking about how this happens. Does anyone know of a working jeditable version and an autocomplete function working together, so I can click on the text and get a text field and have autocomplete functionality working with this text field.

EDIT: I open up generosity, as it still seems that none of these solutions copy + jeditable tags, where I can use jeditable to get an editable texbox after clicking on the text, and then be able to enter a comma separated list that automatically fills every record like me (similar to putting tags in a stack overflow).

+4
source share
6 answers

Take a look at this

JQuery-based Inplace Editing + AutoFill

Using

$('#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.

+13
source

This is exactly what Jeditable user inputs are for. A quick and dirty check working demo (start typing something starting with the letter a ).

The demo was done in 5 lines of code. It uses the Jörn Zaefferer Autocomple plugin to autocomplete:

 $.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"] } });
+11
source

I needed the same functionality with jeditable and autocomplete from bassistance as a comma-separated list of emails. So, I changed the demo from Mika Tuupola and did it 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 main thing to understand here is that when you call $ ('input', this) .autocomplete (...), you actually apply the autocomplete plugin functionality to the editable input and that where you should autocomplete options , through the settings object, which matches the settings that you pass jeditable.

+4
source

Editable: jQuery jeditable I used it recently in my project (as such and with minor modifications to working with pages)

Autofill: bassistance

+2
source

Combining it with the jQuery user interface is not much different from the above Mika example. It 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"] } });
+1
source

Full working integration of dataTable, dataTables, editable (deprecated), jEditable, autocompleted jQuery plugins with AJAX source and results updated at the bottom of the page (i.e. attached to the html body) are solved using:

 $.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 the table:

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

More articles:


All Articles