Autocomplete/Select2 with Vue

Autocomplete/Select2 with Vue

ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0

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.

Answers

  • allanallan Posts: 61,686Questions: 1Answers: 10,100 Site admin

    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

  • ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0

    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

  • allanallan Posts: 61,686Questions: 1Answers: 10,100 Site admin

    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

  • ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0
    edited April 2023

    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

Sign In or Register to comment.