Jquery Autocomplete feature

x1484

Hi again

I would like to add a Jquery autocomplete feature :
https://editor.datatables.net/plug-ins/field-type/editor.autoComplete

on a specific column of a datatable editor (DTE) : the column is an employee id and
that column makes an AJAX call to retrieve the employee's name after (2nd column).

Is there any jsfiddle or live.datatable example on how to implement a Jquery
Autocomplete cell in a DTE ?

Is there any specific order in the includes (css/js) to take care of ?

Thanks so much, Bye
x1484

x1484

Hi again

Sorry to not have been sufficiently accurate in my question.

I have included the js, the css, included the js code, specified the employee_id field type as "autoComplete" as well.

As soon as I specify the field type, nothing works.

So is there any include sequence to take care of ?
Thanks
x1484

x1484

Hello,

I found out the reason, bad js include path

Nevertheless, my employee id field appears but the ajax php page is never called.

Here is a code fragment, is the syntax correct ?

the alert trace box is never displayed :

gridedit = new $.fn.dataTable.Editor( {
        table: '#grid',
        fields: [ 
            {
                label: "Employee ID",
                name: "employee_id",
                type: "autoComplete",
                source: function (query, result) {
                            alert('trace here');
                            $.ajax( {
                                        url: 'ajax.php',
                                        cache: false,
                                        async: false,
                                        data:'query=' + query,            
                                        dataType:"json",
                                        type:"POST",
                                        dataType: 'json',
                                        success: function ( data ) {

                                            // code here

                                        }
                                    } );
                }
            }
            <...>

Thanks so much
x1484

x1484

Hi again,

I removed the alert box and simply put a debug text file in ajax.php to see what is going on and ajax.php is never called. The same ajax.php is called from the dependent API and is working nice.

I have no idea what makes the autocomplete not working...

Thanks
x1484

allan

Hi,

The source option needs to be wrapped in a opts object - e.g.:

gridedit = new $.fn.dataTable.Editor( {
        table: '#grid',
        fields: [
            {
                label: "Employee ID",
                name: "employee_id",
                type: "autoComplete",
                opts: {
                    source: function (query, result) {
                            alert('trace here');
                            $.ajax( {
                                        url: 'ajax.php',
                                        cache: false,
                                        async: false,
                                        data:'query=' + query,           
                                        dataType:"json",
                                        type:"POST",
                                        dataType: 'json',
                                        success: function ( data ) {
 
                                            // code here
 
                                        }
                                    } );
                }
              }
            }
            <...>

Anything in the opts object is passed on to jQuery UI's auto complete.

Allan

x1484

Hello Allan

Thanks a lot.

To complete my post, there is one bug i found out, solved by replacing that line

data:'query=' + query,

by this line

data:'query=' + query.term,

But there is still something which is strange. When i'm in the success section, i do this :

success: function (data) {
           result ( $.map( data,    function (item) { 
              return {  emp_id: item.emp_id, 
                    emp_name: item.emp_name,
                    label: item.emp_id + '('+item.emp_name+')',
                    value: item.emp_id 
                };
             } 
            ) 
           );
        }
    minLength: 2,
       select: function( event, ui ) {
          gridedit.field('emp_id').val(ui.item.emp_id);
          $(table.cell( current_row, COLUMN_EMP_ID ).node()).html(ui.item.emp_id);
          gridedit.field('emp_name').val(ui.item.emp_name);
          $(table.cell( current_row, COLUMN_EMP_NAME ).node()).html(ui.item.emp_name);
       }
}   

And when i select one of the employee id, it fills up the employee name but the cursor does not exit from the autocomplete entry field (emp_id).

The problem is due to this (when i remove it, the cursor exits out of the autocomplete field) :

gridedit.field('emp_id').val(ui.item.emp_id);
              $(table.cell( current_row, COLUMN_EMP_ID ).node()).html(ui.item.emp_id);
              gridedit.field('emp_name').val(ui.item.emp_name);
              $(table.cell( current_row, COLUMN_EMP_NAME ).node()).html(ui.item.emp_name);

So how can i set the other columns values in the DataTable Editor correctly when the user select an autocomplete value ?

Any ideas ?

Thanks so much
x1484

x1484

Hello again

Is it a recommended practice to set Datatable Editor fields via this select: Jquery Autocomplete feature ?
Before implementing it, i have used the dependent API but that one does not fire anymore except if i select a suggested item via the mouse. If i select an item via the keyboard the dependent() API does not work anymore...
Thanks
x1484

allan

If i select an item via the keyboard the dependent() API does not work anymore...

That suggests that AutoComplete is not triggering a change event when selecting a value via the keyboard. Try this - I just jQuery UI AutoComplete uses the select event:

editor.dependent(
  'myField',
  function(val, data) {
    ...
  },
  {
    event: 'select change'
  }
);

That will bind to both the select and change events.

Allan