Using tokeninput plugin in datatables editor

Sarbast

Hello,

There an autocomplete plugin called "Tokeninput" is like "Jquery Autocomplete", but easier in customization. This plugin work with any input field. My question is can I use it with editor or need special plugin like "Jquery Autocomplete".

Thanks in advance

allan

I haven't seen that library before - it looks good (although the demo doesn't appear to work on an iPad). To be able to use it inside Editor, you need a field type plug-in which serves as an integration between Editor and the external library. It allows Editor to do things like initialise the field, get and set values, etc.

Allan

Sarbast

Thanks Allan,

I have tried to create custom field type for tokeninput" plugin it suppose to create some lits dynamically, but it doesn't. I have implemented this plugin with normal html and it works fine. Here is my code for Create function for custom field:

    create: function ( conf ) {
        conf._input = $('<input type="text" id="'+conf.id+'">')
            .tokenInput( conf.opts || {} );
        return conf._input[0];
    }

In normal HTML this plug-in need simple input type text as:

<input type="text" id="skill_input" />

And the following is JS code for it:

$("#skill_input").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 19, name: "Scheme"},
                {id: 23, name: "Lisp"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ]);

So could you please see what is wrong with our code.

Regards

allan

Looks like TokenInput needs the element to be in the document before it can be initialized:

    create: function (conf) {
      conf._input = $('<input type="text" id="' + conf.id + '" />');

      
      this.on('open', function () {
        conf._input.tokenInput(
          conf.opts || {}
        );
      });

      return conf._input[0];
    },

Working example: http://live.datatables.net/kizozuxu/1/edit . The styling is rubbish, but perhaps you have some styles for TokenInput. It doesn't appear to have any of its own.

Allan

Sarbast

Hi,
Thanks alot Allan.
I have applied the code and it worked, but there are some bugs in it.

1- When open the form (New or Edit) several times the input field will repeat in the form as opened (eg. form opened 5 times, the input field will repeat 5 times ) as

I solved this bug by adding this function to the "Create" method as:

create: function (conf) {
     conf._input = $('<input type="text" id="' + conf.id + '" />');  
 
   
  this.on('open', function () {
    conf._input.tokenInput(
      conf.opts
    );
    
   });
  
   this.on('close', function () {
    this.off( 'open' );
   });
 
      return conf._input[0];
    },

2- In Edit form the input field appear empty. Also, if I create new row and after that I edit another row the input field will get the values of the inserted row. NOT SOLVED YET

3- There are several function work with this libirary such as "PrevetDuplicate", but it doesn't work with editor. NOT SOLVED YET

Regards

Sarbast

Hello Allan,

I have add the close function and tokeninput CSS to the example you provided

Herelive.datatables.net/qaragofo/1/edit

Regards

allan

Here is a bit of an update: http://live.datatables.net/qaragofo/2/edit . I've got it doing an init only once - checking a variable on open or set - whichever comes first will run it.

It also looks like we can't just use $().val() to get and set the value - needs the tokenInput plug-in's API. I presume that you've used it before (?) so you'll be far more expert in it that me just looking at the documentation for the first time, but I've tried a little bit with the get and set functions. I'm not sure it is right, and I think the correct answer will actually depend upon the structure of your data (e.g. name / id pairs?). But hopefully that is a useful starting point.

Allan

Sarbast

Thanks alot Allan