Issue #3407721 by Masami, yas: Refactor to native JavaScript from jQuery...

Issue #3407721 by Masami, yas: Refactor to native JavaScript from jQuery (aws_cloud_image_import.js)

modules/cloud_service_providers/aws_cloud/aws_cloud.libraries.yml

@@ -48,8 +48,7 @@ aws_cloud_image_import:
     theme:
       css/aws_cloud_image_import.css: {}
   dependencies:
-    - core/jquery
-    - cloud/select2
+    - cloud/tom-select
 
 aws_cloud_instance_monitor:
   version: 5.x-dev

modules/cloud_service_providers/aws_cloud/css/aws_cloud_image_import.css

-.select2-selection__arrow {
-  display: none;
+select#edit-name+.ts-wrapper {
+  padding: 5px 30px 5px 5px;
 }
 
-select[name=name] {
-  min-width: 500px;
+.plugin-dropdown_input.focus.dropdown-active .ts-control {
+  border: none;
 }

modules/cloud_service_providers/aws_cloud/js/aws_cloud_image_import.js

-(function ($) {
+(function () {
   'use strict';
 
-  $('#edit-name').select2({
-    ajax: {
-      url: 'search',
-      dataType: 'json',
-      type: 'GET',
-      delay: 1000,
-      data: function (params) {
-        return {
-          q: params.term
-        };
-      },
-      processResults: function (data) {
-        let res = data.map(function (item) {
-          return {id: item.id, text: item.name};
-        });
-        return {
-          results: res
-        };
+  const mySelect = new TomSelect('#edit-name', {
+    valueField: 'id',
+    labelField: 'name',
+    searchField: [],
+    placeholder: 'Search for images',
+    shouldLoad: function (query, callback) {
+      if (query.length > 3) {//if search has at least 4 chars
+        return true;
       }
     },
-    minimumInputLength: 4,
-    placeholder: 'Search for images'
+    // fetch remote data
+    load: function (query, callback) {
+      // Clear existing options before adding new ones
+      mySelect.clearOptions();
+      const url = 'search?q=' + encodeURIComponent(query);
+      fetch(url)
+        .then(response => response.json())
+        .then(json => {
+          callback(json);
+        }).catch(() => {
+          callback();
+        });
+
+    },
+    render: {
+      option: function (item, escape) {
+        return `<div><div style="font-weight: bold;">${escape(item.name)}</div></div>`;
+      },
+
+      item: function (item, escape) {
+        return '<div title="' + item.name + '">' + item.name + '</div>';
+      }
+    }
+
   });
 
-})(jQuery);
+})();