feat: simple typeahead search (#1335)

* feat: simple typeahead search Signed-off-by: Martijn van Exel <[email protected]> * Update public/templates/index.tmpl Co-authored-by: Aarni Koskela <[email protected]> * Update public/templates/index.tmpl Co-authored-by: Aarni Koskela <[email protected]> * Update public/templates/index.tmpl Co-authored-by: Aarni Koskela <[email protected]> * fix: clean up styling, use data attrs Signed-off-by: Martijn van Exel <[email protected]> --------- Signed-off-by: Martijn van Exel <[email protected]> Co-authored-by: Aarni Koskela <[email protected]> Co-authored-by: Andrew Calcutt <[email protected]>
maptiler · Aug 9, 2024 · 5cb0047 · 5cb0047
1 parent f846573
commit 5cb0047
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/public/resources/index.css b/public/resources/index.css
@@ -73,12 +73,29 @@ section {
   font-size: 20px;
   background: #fff;
 }
+.filter-details {
+  padding: 20px 30px;
+}
+.box input { /* Filter text input */
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ededed;
+  border-radius: 4px;
+  /* fill out to parent */
+  width: 100%;
+}
 .item {
   background: #fff;
   height: 191px;
   border: 1px solid #ededed;
   border-top: none;
 }
+.filter-item {
+  background: #fbfbfb;
+  height: 150px;
+  border: 1px solid #ededed;
+  border-top: none;
+}
 .item:nth-child(odd) {
   background-color: #fbfbfb;
 }

diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
@@ -13,17 +13,39 @@
       el.setSelectionRange(0, el.value.length);
       return false;
     }
+
+    function filter() {
+      var filter = document.getElementById('filter').value.toLowerCase();
+      var items = document.getElementsByClassName('item');
+      for (var i = 0; i < items.length; i++) {
+          var item = items[i];
+          var dataName = item.getAttribute('data-name')?.toLowerCase() ?? '';
+          var dataIdentifier = item.getAttribute('data-id')?.toLowerCase() ?? '';
+          item.hidden = !(dataName.indexOf(filter) > -1 || dataIdentifier.indexOf(filter) > -1);
+      }
+    }
   </script>
 </head>
 <body>
   <section>
     <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png{{&key_query}}" alt="TileServer GL" /></h1>
     <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
+    <h2 class="box-header">Filter</h2>
+    <!-- filter box -->
+    <div class="box">
+      <div class="filter-item">
+        <div class="filter-details">
+          <h3>Filter styles and data by name or identifier</h3>
+          <!-- filter input , needs to call filter() when content changes...-->
+          <input id="filter" type="text" oninput="filter()" placeholder="Start typing name or identifier" />
+        </div>
+      </div>
+    </div>
     {{#if styles}}
       <h2 class="box-header">Styles</h2>
       <div class="box">
       {{#each styles}}
-        <div class="item">
+        <div class="item" data-id="{{@key}}" data-name="{{name}}">
           {{#if thumbnail}}
             <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
@@ -70,7 +92,7 @@
       <h2 class="box-header">Data</h2>
       <div class="box">
       {{#each data}}
-        <div class="item">
+        <div class="item" data-id="{{@key}}" data-name="{{tileJSON.name}}">
           {{#if thumbnail}}
             <img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}