Recoded how the Auto-complete subdivision search worked in php and js

classes/Base.php

@@ -263,8 +263,6 @@ class Base {
 
     public function do() {
 
-//        $this->debug($_POST);
-
         $_SESSION[self::TODAY] = date("Y-m-d");
 
         // Login

classes/PermitsBySubdivision.php

@@ -237,6 +237,7 @@ class PermitsBySubdivision extends Base {
             $statement->bindValue(":permit_permit_end_date", $permit_permit_end_date);
         }
 
+
         $statement->execute();
 
         $recordset = $statement->fetch(PDO::FETCH_ASSOC);
@@ -339,6 +340,9 @@ class PermitsBySubdivision extends Base {
         $statement->bindValue(":limit", $this->pagination_size, PDO::PARAM_INT);
         $statement->bindValue(":offset", $offset, PDO::PARAM_INT);
 
+//        echo $projecttype;
+//        die();
+
         $statement->execute();
 
         $permits = $this->getTableXML("permits", $statement);
@@ -427,29 +431,108 @@ class PermitsBySubdivision extends Base {
         return $this->getTable("permits", $SQL);
     }
 
+//    // ================================
+//    // Return AutoComplete Names (ajax)
+//    // ================================
+//
+//    public function getAutoCompleteSubdivisions() {
+//
+//        $this->debug($_GET);
+//
+//        $results = array();
+//
+//        $subscription_serial = filter_input(INPUT_GET, "subscription_serial") ?: "";
+//
+//        $subscription = (new Subscriptions())->getSubscription($subscription_serial);
+//
+//        if ($subscription->count() == 0) {
+//            $this->logError("Invalid Subscription ({$subscription_serial}). " . __METHOD__);
+//        }
+//
+//        $permit_area = $subscription->record->subscription_area;
+//        $projecttype = $subscription->record->subscription_projecttype;
+//
+//        $subdivision = filter_input(INPUT_GET, "permit_sub_div_name") ?: "";
+//        $subdivision = trim(preg_replace("/\s+/", " ", $subdivision));
+//        $subdivision = preg_replace("/'+/", "'", $subdivision);
+//        $subdivision = preg_replace('/"+/', '"', $subdivision);
+//        $subdivision = str_replace("'", "''", $subdivision);
+//
+//        $SQL = "select distinct permit_sub_div_name from view_permits where permit_project_type = '{$projecttype}' and permit_sub_div_name like '%{$subdivision}%'";
+//
+//        if ($permit_area != "All") {
+//            $SQL .= " and view_permits.permit_county in (select county_serial from view_counties where county_area = '{$permit_area}')";
+//        }
+//
+//        $SQL .= "order by permit_sub_div_name limit 20 offset 0";
+//
+//        $matches = $this->getTable("subdivisions", $SQL);
+//
+//        foreach ($matches as $match) {
+//            $results[] = (string) $match->permit_sub_div_name;
+//        }
+//
+//        header('Content-Type: application/json');
+//        echo json_encode($results);
+//        exit();
+//    }
     // ================================
     // Return AutoComplete Names (ajax)
     // ================================
 
     public function getAutoCompleteSubdivisions() {
 
-        $results = array();
+        $results = [];
 
-        $subdivision = filter_input(INPUT_GET, "permit_sub_div_name") ?: "";
+        $subscription_serial = filter_input(INPUT_GET, "subscription_serial", FILTER_SANITIZE_NUMBER_INT) ?: 0;
-        $subdivision = trim(preg_replace("/\s+/", " ", $subdivision));
+        $subdivision = filter_input(INPUT_GET, "permit_sub_div_name", FILTER_SANITIZE_SPECIAL_CHARS) ?: "";
-        $subdivision = preg_replace("/'+/", "'", $subdivision);
-        $subdivision = preg_replace('/"+/', '"', $subdivision);
-        $subdivision = str_replace("'", "''", $subdivision);
 
-        $SQL = "select distinct permit_sub_div_name from view_permits where permit_sub_div_name like '%{$subdivision}%' order by permit_sub_div_name limit 10 offset 0";
+        $subscription = (new Subscriptions())->getSubscription($subscription_serial);
 
-        $matches = $this->getTable("subdivisions", $SQL);
+        if ($subscription->count() == 0) {
+            $this->logError("Invalid Subscription ({$subscription_serial}). " . __METHOD__);
 
-        foreach ($matches as $match) {
+            header("Content-Type: application/json");
-            $results[] = (string) $match->permit_sub_div_name;
+            echo json_encode($results);
+            exit();
         }
 
-        header('Content-Type: application/json');
+        $permit_area = $subscription->record->subscription_area;
+        $projecttype = $subscription->record->subscription_projecttype;
+
+        $subdivision = trim(preg_replace("/\s+/", " ", $subdivision));
+
+        $SQL = "select distinct permit_sub_div_name
+                  from view_permits
+                 where permit_project_type = :projecttype
+                   and permit_sub_div_name like :subdivision";
+
+        if ($permit_area != "All") {
+            $SQL .= " and permit_county in (
+                      select county_serial
+                        from view_counties
+                       where county_area = :permit_area
+                  )";
+        }
+
+        $SQL .= " order by permit_sub_div_name limit 20 offset 0";
+
+        $statement = $this->connect()->prepare($SQL);
+
+        $statement->bindValue(":projecttype", $projecttype, PDO::PARAM_STR);
+        $statement->bindValue(":subdivision", "%{$subdivision}%", PDO::PARAM_STR);
+
+        if ($permit_area != "All") {
+            $statement->bindValue(":permit_area", $permit_area, PDO::PARAM_STR);
+        }
+
+        $statement->execute();
+
+        while ($record = $statement->fetch(PDO::FETCH_OBJ)) {
+            $results[] = (string) $record->permit_sub_div_name;
+        }
+
+        header("Content-Type: application/json");
         echo json_encode($results);
         exit();
     }

css/searchPermitsBySubdivision.css

@@ -12,3 +12,39 @@
     padding:   0 .75rem;
     cursor: pointer;
 }
+
+
+/* Wrap your input in a positioned container */
+.subdivision-wrapper {
+    position: relative;
+}
+
+/* Fix dropdown width + positioning */
+.subdivision-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;          /* match input width */
+    max-width: 100%;      /* prevent overflow */
+    z-index: 1055;
+
+    max-height: 250px;    /* scroll if too many */
+    overflow-y: auto;
+
+    border: 1px solid #dee2e6;
+    border-radius: 0.375rem;
+    background: #fff;
+
+    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
+}
+
+.subdivision-results .dropdown-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.subdivision-results .dropdown-item:hover {
+    background-color: #f8f9fa;
+    cursor: pointer;
+}

js/searchPermitsBySubdivision.js

@@ -7,8 +7,6 @@ $(document).ready(function () {
 
     var $application = $("#APPLICATION_MNEMONIC").val(), $sessionStorage = JSON.parse(sessionStorage.getItem($application) || "{}");
 
-//    console.log($sessionStorage);
-
     // =================
     // Process Enter Key
     // =================
@@ -206,19 +204,45 @@ $(document).ready(function () {
 
     });
 
-    // ---------------------
-    // Autocomplete Searches
-    // ---------------------
 
-    $(".subdivision-autocomplete").autoComplete({
 
-        resolverSettings: {
+    // ====================
-            url: "main.php?Xaction=PermitsBySubdivision.getAutoCompleteSubdivisions",
+    // Autocomplete Searchs
-            queryKey: "permit_sub_div_name",
+    // ====================
-            requestThrottling: 0
+
+    let subdivisionSearchTimer = null;
+
+    $(".subdivision-autocomplete").on("keyup", function () {
+
+        clearTimeout(subdivisionSearchTimer);
+
+        let $input = $(this);
+        let searchValue = $input.val().trim();
+
+        // optional: don't search until 2+ chars
+        if (searchValue.length < 2) {
+            $(".subdivision-results").empty().hide();
+            return;
+        }
+
+        subdivisionSearchTimer = setTimeout(function () {
+
+            $.ajax({
+                url: "main.php",
+                type: "GET",
+                dataType: "json",
+                data: {
+                    Xaction: "PermitsBySubdivision.getAutoCompleteSubdivisions",
+                    subscription_serial: $sessionStorage.subscription_serial,
+                    permit_sub_div_name: searchValue
                 },
-        noResultsText: "No Matching Subdivisions Found.",
+                success: function (results) {
-        bootstrapVersion: "4"
+                    renderSubdivisionResults(results, $input);
+
+                }
+            });
+
+        }, 250);
 
     });
 
@@ -776,3 +800,35 @@ function getPermitRecordDialog(permit_serial) {
     return dialog;
 
 }
+
+function renderSubdivisionResults(results, $input) {
+
+    let $dropdown = $(".subdivision-results");
+
+    if (!$dropdown.length) {
+        $dropdown = $("<div class='subdivision-results dropdown-menu show w-100'></div>");
+        $input.closest(".subdivision-wrapper").append($dropdown);
+    }
+
+    $dropdown.empty();
+
+    if (!results.length) {
+        $dropdown.append("<span class='dropdown-item text-muted'>No Matching Subdivisions Found</span>");
+        return;
+    }
+
+    results.forEach(function (item) {
+
+        let $option = $("<button type='button' class='dropdown-item'></button>").text(item);
+
+        $option.on("click", function () {
+            $input.val(item);
+            $dropdown.hide();
+        });
+
+        $dropdown.append($option);
+
+    });
+
+    $dropdown.show();
+}

xsl/content.xsl

@@ -128,7 +128,7 @@
                                         </a>
                                     </li> 
                   
-                                    <li class="nav-link disabled">
+<!--                                    <li class="nav-link disabled">
                                         <xsl:text>  |  </xsl:text>
                                     </li>
 
@@ -137,7 +137,7 @@
                                             <i class="bi bi-code me-1" aria-hidden="true"/>
                                             DEV STUB
                                         </a>
-                                    </li>
+                                    </li>-->
                 
                                 </xsl:if>
                                 

xsl/searchPermitsBySubdivision.xsl

@@ -71,8 +71,10 @@
                             
                             <div class="col-lg-3 mb-3">
                                 <label class="form-label" for="permit_sub_div_name">Subdivision</label>
+                                <div class="subdivision-wrapper">
                                     <input type="text" class="form-control form-control-sm subdivision-autocomplete" autocomplete="chrome-off" name="permit_sub_div_name" id="permit_sub_div_name" maxlength="100"/>
                                 </div>
+                            </div>
                             
                             <div class="col-lg-3 mb-3">
                                 <label class="form-label" for="permit_project_city">City</label>