Autocomplete/Select2 with Vue

ktadrowski

Hello,

I need functionality like autocomplete for my Vue 3 + Datatables + Editor
While searching through the forum I came across Autocomplete and Select2 plugin for jQuery.

How can I use them with Vue?
They individually offers npm libraries, but will datatables and eventually Editor can detect those and enable the field as autocompleting dropdown?

-Thanks.

allan

At the moment, what you would probably need to do in this case is use the code from the Editor / Select2 integration file (possibly without the UMD if you are using ESM loaders), which will attach itself to the DataTable object and you'd then be able to use type: 'select2' as normal from there.

I do intend to provide NPM modules for the plug-ins to make this kind of thing a little easier in future, although I'm not yet certain when that will happen (I'm working on the code Editor library as an NPM package at the moment).

Allan

ktadrowski

Hey Allan,

Thanks. I have done following till now:

In index.html included:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"  type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="application/javascript" defer src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.1/select2.js"></script>

In my vue project I have added the integration file >! "editor.select2.js" and removed the AMD related "if condition". The contents of factory function looks like this now:

 if (typeof exports === 'object') {
    // Node / CommonJS
    module.exports = function ($, dt) {
      if (!$) { $ = require('jquery'); }
      factory($, dt || $.fn.dataTable || require('datatables'));
    };
  }
  else if (jQuery) {
    // Browser standard
    factory(jQuery, jQuery.fn.dataTable);
  }

Then I imported "editor.select2.js" in my component as below:

import * as Select2 from "@/core/plugins/dt-editors/editor.select2.js";

Later tried to add the field type to editor config as:

fields: [{
label: "EXP/ FEE/ INV ADJ TYPE",
name: "type",
type: "select2",
ipOpts: typeArr,
}]

and also tried to add it in onMounted() as:

dtEditorFees.add({
label: "EXP/ FEE/ INV ADJ TYPE",
name: "type",
type: "select2",
options: typeArr,
});

But I am still getting error:

Error: Error adding field - unknown field type select2

allan

Do you know if you are using CommonJS or ESM?

If ESM (which is reasonably likely with Vue), you'll probably need to do:

import DataTable from 'datatables.net';

at the top of the integration file. That will populate the DataTable variable and give somewhere for the plug-in to latch onto.

Allan

ktadrowski

ESM it is.

I modified the import as below:

    import DataTable from 'datatables.net-vue3';
    import DataTablesLib from 'datatables.net-bs5';
    DataTable.use(DataTablesLib);

and that removed the type error.

I have also replaced the require('datatables') with require('datatables.net-vue3'), the correct library name for Vue.

Now below console.log statement coming as undefined

    (function ($, DataTable) {
      'use strict';
    
      console.log(DataTable);
      if (!DataTable.ext.editorFields) {
        DataTable.ext.editorFields = {};
      }

it's undefined, and so the error turned as

Cannot read properties of undefined (reading 'ext').

I tried to remove the DataTable as function parameter, which resulted into displaying the DataTable object in console, but that object is also missing

DataTable.Editor.fieldTypes or
DataTable.ext.editorFields