CODEWITHSUNDEEP
javascriptjqueryautocompletejeditable
leora
leora

Reputation: 196499

Working example of jeditable and autocomplete working together

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).

Upvotes: 4

Views: 11428

Answers (6)

Manoj Shekhawat
Manoj Shekhawat

Reputation: 449

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}">

Upvotes: 0

petercoles
petercoles

Reputation: 1822

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

Upvotes: 1

Mika Tuupola
Mika Tuupola

Reputation: 20387

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

Upvotes: 11

Jorge Vargas
Jorge Vargas

Reputation: 1041

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.

Upvotes: 4

rahul
rahul

Reputation: 187040

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.

Upvotes: 13

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

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

AutoComplete: bassistance

Upvotes: 2

Related Questions