Is it possible to add a jQuery autocomplete input field in the editor form?

bwbFlex · March 2017

I have a form which also is linked to company names. I would like to have an autocomplete on the input field for company names.
Is it possible and how?

allan · March 2017

Yes it is possible. There is an integration plug-in for jQuery AutoComplete and Editor.

There are also integration options for Select2 and Selectize if you prefer them.

Allan

bwbFlex · March 2017

This is what I am looking for, but how do you add this plug in file to the rest of datatables?

allan · March 2017

I'm not sure what you mean by "the rest of datatables"? That plug-in is used in Editor by including it and then using type: 'autocomplete' for the Editor field in question.

Allan

bwbFlex · March 2017

Sorry I meant how do I add it to editor?

Here is what I have. If I remove the type and opts parts, the editor works.
Editor JS

(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'table.company.php',
table: '#dataTable1',
fields: [
{
"label": "Company",
"name": "company_name",
"type": "autoComplete",
"opts": {
              "source": ['Company1', 'Company2', 'Company3', 'Company4', 'Company5' ]
            }
}
]
} );


var table = $('#dataTable1').DataTable( {
                        ajax: 'table.company.php',
                    
columns: [
                            {
                                "data": "company_id"
                            },
                            {
                                "data": "company_name"
                            }
],
select: true
} );

new $.fn.dataTable.Buttons( table, [
                        { extend: "create", editor: editor },
                        { extend: "edit",   editor: editor },
                        { extend: "remove", editor: editor }
                    ] );

                table.buttons().container()
                        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
                } );

                }(jQuery));

index.php

<html>
 <head>
  <!-- css files -->
</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover" id="bwb_vacatures1" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Company</th>
                    </tr>
                </thead>
            </table>
</body>

<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/s/bs-3.3.6/jqc-1.12.3,moment-2.13.0,dt-1.10.12,b-1.2.1,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/date-eu.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.autoComplete.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</html>

The error that I get is:

Uncaught Error adding field - unknown field type autoComplete

kthorngren · March 2017

Uncaught Error adding field - unknown field type autoComplete

Did you include both the Plug-in code and the external libraries under includes?

Kevin

bwbFlex · March 2017

I did, I have

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

kthorngren · March 2017

I think you are missing the actual plugin code. Go here:
https://editor.datatables.net/plug-ins/field-type/editor.autoComplete#Plug-in-code

Click the Javascript link to download the plugin code to add to your web page.

Kevin

bwbFlex · March 2017

I already have it in there

<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/s/bs-3.3.6/jqc-1.12.3,moment-2.13.0,dt-1.10.12,b-1.2.1,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/date-eu.js"></script>


<script type="text/javascript" charset="utf-8" src="js/editor.autoComplete.js"></script>
<!-- I have it like this -->


<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>

allan · March 2017

Could you try adding the plug-in after you load Editor. It shouldn't actually matter any more, but it certainly used to.

Failing that, can you give me a link to your page so I can check it out and debug it directly please?

Thanks,
Allan

bwbFlex · March 2017

I did that and I got this

Uncaught TypeError: $(...).autocomplete is not a function
    at f.create (editor.autoComplete.js:58)
    at f.Field._typeFn (dataTables.editor.min.js:20)
    at f.Field (dataTables.editor.min.js:11)
    at f.add (dataTables.editor.min.js:34)
    at f.add (dataTables.editor.min.js:34)
    at f._constructor (dataTables.editor.min.js:63)
    at new f (dataTables.editor.min.js:8)
    at HTMLDocument.<anonymous> (datatable_script.js:23)
    at i (datatables.min.js:14)
    at Object.fireWith [as resolveWith] (datatables.min.js:14)

allan · March 2017

It sounds like it isn't seeing your AutoComplete include for some reason. Possibly jQuery is being loaded more than once?

However, as I say, if you could give us a link to the page I'll be able to take a look and say exactly what is going wrong.

Thanks,
Allan

bwbFlex · March 2017

I will pm you the page Allan

Is it possible to add a jQuery autocomplete input field in the editor form?

Is it possible to add a jQuery autocomplete input field in the editor form?

Answers

Howdy, Stranger!

Categories

DataTables

Is it possible to add a jQuery autocomplete input field in the editor form?

Is it possible to add a jQuery autocomplete input field in the editor form?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables