From afe63f263975192f9533eadaffdfa8ea2e15005d Mon Sep 17 00:00:00 2001
From: htaymoor <hassan.taymoor@gmail.com>
Date: Tue, 26 Jul 2022 17:14:14 +0500
Subject: [PATCH] jqueryui autocomplete enhancement

---
 js/demo.js              |  5 +++++
 js/structured-filter.js | 43 +++++++++++++++++++++++++++++++++++++----
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/js/demo.js b/js/demo.js
index e2b68e6..ea6da88 100644
--- a/js/demo.js
+++ b/js/demo.js
@@ -336,6 +336,11 @@ var contacts = [
       { label: "Zimbabwe", id: "ZW" },
     ],
   },
+  [
+      {id:"Fruits", type:"input-autocomplete", label:"fruit",
+          api: "{{url('api/fruit')}}"
+      }
+  ]
 ];
 
 var sampleConditions = [
diff --git a/js/structured-filter.js b/js/structured-filter.js
index c409537..23b5903 100644
--- a/js/structured-filter.js
+++ b/js/structured-filter.js
@@ -27,6 +27,7 @@
       list: "list",
       listOpts: "list-options",
       listDropdown: "list-dropdown",
+      inputAutoc: "input-autocomplete"
     },
     // - i18n strings (to translate in other languages)
     i18n = {
@@ -191,7 +192,7 @@
             that._field = that._getFieldById(fieldID);
             var fType = (that._type = that._field.type);
             that._setEditorOperator();
-            if (fType === fTypes.bool || fType.startsWith("list")) {
+            if (fType === fTypes.bool || fType.startsWith("list") || fType.startsWith('input')) {
               that._setEditorValue();
             }
           } else {
@@ -213,7 +214,7 @@
           var fType = that._type,
             value = $(this).val(),
             valid =
-              value !== "" || fType === fTypes.bool || fType.startsWith("list");
+            value !== "" || fType === fTypes.bool || fType.startsWith("list") || fType.startsWith('input');
           if (fType == fTypes.number) {
             valid = valid && !isNaN(value);
           } else if (
@@ -388,7 +389,7 @@
         this._bDel.show();
         if (!this._fList) {
           this._fList =
-            '<select id="field">' +
+          '<select id="field" class="selectize">' +
             EvoUI.optNull +
             this.options.fields.map(function (f) {
               return EvoUI.inputOption(f.id, f.label);
@@ -423,6 +424,7 @@
             break;
           case fTypes.listOpts:
           case fTypes.listDropdown:
+            case fTypes.inputAutoc:
           case fTypes.bool:
             //h.push(i18n.sEqual);
             h += EvoUI.inputHidden("operator", evoAPI.sEqual);
@@ -537,6 +539,12 @@
                     })
                     .join("") +
                   "</select>";
+                  break;
+              case fTypes.inputAutoc:
+                console.log('autocomplete input');
+                var autoCompleteObj = '<input id="value" type="text" class="basicAutoComplete" data-url="'+fld.api+'" autocomplete="off">';
+                h +=
+                  autoCompleteObj;
                 break;
               case fTypes.date:
               case fTypes.time:
@@ -564,6 +572,24 @@
                 .find("#value,#value2")
                 .datepicker({ dateFormat: this.options.dateFormat });
             }
+            if (fType == fTypes.inputAutoc) {
+              editor
+                .find("#value")
+                .each(function(){
+                  var $this = $(this);
+                  var url = $(this).data('url');
+                  $this.autocomplete({
+                    source: function (request, response) {
+                      jQuery.get(url, {
+                        s: request.term
+                        }, function (data) {
+                            response(data);
+                        });
+                    },
+                      minLength: 3
+                  });
+                });
+            }
           }
           if (v) {
             var $value = editor.find("#value");
@@ -657,7 +683,16 @@
           fv.label = i18n.sIsNull;
         }
         fv.value = v.val();
-      } else {
+      } 
+      else if (this._type == fTypes.inputAutoc) {
+        op.label = i18n.sIs;
+        op.value = evoAPI.sEqual;
+        var val = v.val()
+        console.log(val);
+        fv.label = val;
+        fv.value = val;
+      } 
+      else {
         var o = e.find("#operator"),
           opVal = o.val();
         op.label = o.find("option:selected").text();