diff --git a/Backend/Views/NiagaraDataSynchronize/Index.cshtml b/Backend/Views/NiagaraDataSynchronize/Index.cshtml
index 98cfe79..a9c1b6a 100644
--- a/Backend/Views/NiagaraDataSynchronize/Index.cshtml
+++ b/Backend/Views/NiagaraDataSynchronize/Index.cshtml
@@ -52,6 +52,13 @@
                             <div class="card-body row">
                                 <div class="col-12">
                                     <!-- datatable start -->
+                                    <div class="btn-group flex-wrap building_select"></div>
+                                    <hr />
+                                    <div class="btn-group flex-wrap systemMainType_select"></div>
+                                    <hr />
+                                    <div class="btn-group flex-wrap systemSubType_select"></div>
+                                    <hr />
+                                    <button class="btn btn-primary" id="search">搜尋</button>
                                     <table id="niagara_data_table" class="table table-bordered table-hover m-0 text-center">
                                         <thead class="thead-themed">
                                             <tr>
@@ -60,7 +67,7 @@
                                                 <th>point_name</th>
                                             </tr>
                                         </thead>
-                                        <tbody>
+                                        <tbody class="raw_data">
                                         </tbody>
                                     </table>
                                 </div>
@@ -79,6 +86,7 @@
         var buildingId, building;
         var rawDataImportTable;
         var ds;
+        var dataInTable;
 
         var today = new Date();
         var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
@@ -89,6 +97,9 @@
 
             projectName();
             rawDataImportTable = $("#niagara_data_table").DataTable({
+                paging: false,
+                searching: false,
+                destroy: true,
                 "columns": [
                     {
                         "data": "value"
@@ -131,6 +142,8 @@
                             var dateTime = date + ' ' + time;
                             document.getElementById('loadDataText').innerText = "共 " + rel.data.length + " 筆資料 \n" + dateTime;
                         }
+                        dataInTable = data;
+                        console.log("---", dataInTable);
                         return data;
                     }
                 }
@@ -253,5 +266,145 @@
                 }
             }, 'json');
         }
+
+        let buildingValue, systemMainId, systemMainValue, systemSubId, systemSubValue;
+
+        document.querySelector(".building_select").addEventListener("click", (e) => {
+            buildingValue = e.target.dataset.value;
+            $(".building_select .btn-info.active").removeClass('btn-info active')
+            $(e.target).addClass('btn-info active');
+        })
+        document.querySelector(".systemSubType_select").addEventListener("click", (e) => {
+            systemSubId = e.target.dataset.value;
+            systemSubValue = e.target.dataset.systemValue;
+            $(".systemSubType_select .btn-info.active").removeClass('btn-info active')
+            $(e.target).addClass('btn-info active');
+        })
+
+        $(function () {
+            // 產生所有棟別下拉式選單
+            fetch("/BuildInfo/BuildInfoList", {
+                method: "POST"
+            }).then(res => res.json()).then(({ data }) => {
+                const buildingElement = document.querySelector(".building_select");
+
+                console.log(data);
+                let str = "";
+                data.forEach(({ full_name, building_tag
+                }) => {
+                    if (building_tag.includes("$3")) {
+                        building_tag = building_tag.replace("$3", "");
+                    }
+                    str += `<button data-value=${building_tag} class='btn'>${full_name}</button>`;
+                })
+                buildingElement.innerHTML = str;
+            });
+
+            // 產生所有大類系統下拉式選單
+            const systemMainTypeElement = document.querySelector(".systemMainType_select");
+            let init_id = '';
+            fetch("/SystemCategory/SystemMainList", {
+                method: "POST"
+            }).then(res => res.json()).then(({ data }) => {
+                //console.log(data);
+                init_id = data[0].id;
+                //console.log(init_id);
+                let str = "";
+                data.forEach(({ id, system_key, system_value
+                }) => {
+                    str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
+                })
+                systemMainTypeElement.innerHTML = str;
+                FetchSystenSubList(init_id);
+            });
+
+            // 產生所有小類系統下拉式選單
+            systemMainTypeElement.addEventListener("click", (e) => {
+                systemMainId = e.target.dataset.value;
+                systemMainValue = e.target.dataset.systemValue;
+                $(".systemMainType_select .btn-info.active").removeClass('btn-info active')
+                $(e.target).addClass('btn-info active');
+                //console.log(value);
+
+                FetchSystenSubList(systemMainId);
+            })
+        });
+
+        function FetchSystenSubList(id) {
+            var formData = new FormData();
+            formData.append("id", parseInt(id));
+
+            fetch("/SystemCategory/SystemSubList", {
+                method: "POST",
+                body: formData
+            }).then(res => res.json()).then(({ data }) => {
+                const systemSubTypeElement = document.querySelector(".systemSubType_select");
+
+                //console.log(data);
+                let str = "";
+                data.forEach(({ id, system_key, system_value
+                }) => {
+                    str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
+                });
+                systemSubTypeElement.innerHTML = str;
+            })
+        }
+
+        // 查詢功能，查棟別跟大類
+        const searchButton = document.querySelector("#search");
+        searchButton.addEventListener("click", (e) => {
+            //const buildingValue = document.querySelector(".building_select").value;
+            //const systemMainId = document.querySelector(".systemMainType_select").value;
+            //const systemMainValue = document.querySelector(`option[value='${systemMainId}']`).getAttribute("data-system-value");
+            //const systemSubId = document.querySelector(".systemSubType_select").value;
+            //const systemSubValue = document.querySelector(`option[value='${systemSubId}']`).getAttribute("data-system-value");
+
+            console.log("111", buildingValue, systemMainValue);
+
+            const table_body = document.querySelector('.raw_data');
+            let rawdata_table_body = '';
+            let count = 1;
+            //dataInTable.forEach(({ tag_name, value, point_name
+            //}) => {
+            //    console.log("111", buildingValue, systemMainValue, systemSubValue);
+            //    console.log("222", tag_name.includes(`_${buildingValue}_`), tag_name.includes(`_${systemMainValue}_`), tag_name.includes(`_${systemSubValue}_`));
+            //    console.log("333", tag_name, value);
+            //    console.log("444", rawdata_table_body);
+
+            //    if (tag_name.includes(`_${buildingValue}_`) && tag_name.includes(`_${systemMainValue}_`)) {
+            //        console.log("333", tag_name, value);
+            //        let odd_or_even = '';
+            //        if (count % 2 == 0) {
+            //            odd_or_even = 'odd';
+            //        } else {
+            //            odd_or_even = 'even';
+            //        }
+
+            //        rawdata_table_body += `<tr role="row" class="${odd_or_even}"><td class="sorting_1 dtr-control">${value}</td><td>${tag_name}</td><td>${point_name}</td></tr>`;
+            //    }
+
+            //});
+            //table_body.innerHTML = rawdata_table_body;
+            let search_str = `_${buildingValue}_${systemMainValue}_${systemSubValue}_`;
+            console.log("$$$", search_str, dataInTable.filter(({ tag_name }) => tag_name.includes(search_str)))
+             $("#niagara_data_table").DataTable({
+                paging: false,
+                searching: false,
+                destroy: true,
+                "columns": [
+                    {
+                        "data": "value"
+                    },
+                    {
+                        "data": "tag_name"
+                    },
+                    {
+                        "data": "point_name"
+                    },
+                ],
+                data: dataInTable.filter(({ tag_name }) => tag_name.includes(search_str))
+            })
+        })
+
     </script>
 }
\ No newline at end of file