增加一个筛选器

web/demoset.php

@@ -1,57 +1,88 @@
-<?php require_once("./include/db_info.inc.php");?>
+<?php require_once("./include/db_info.inc.php"); ?>
 
 <?php $show_title = "$MSG_PROBLEMS - $OJ_NAME"; ?>
 <?php include("template/$OJ_TEMPLATE/header.php"); ?>
 <div class="padding">
 
-<script type="text/javascript" src="include/react/react.min.js"></script>
-<script type="text/javascript" src="include/react/react-dom.min.js"></script>
+  <script type="text/javascript" src="include/react/react.min.js"></script>
+  <script type="text/javascript" src="include/react/react-dom.min.js"></script>
 
-<?php
-// 遍历demos文件夹下的所有php文件
-$directory = new DirectoryIterator(dirname(__FILE__) . '/demos');
-$files = [];
+  <?php
+  // 遍历demos文件夹下的所有php文件
+  $directory = new DirectoryIterator(dirname(__FILE__) . '/demos');
+  $files = [];
 
-foreach ($directory as $fileinfo) {
-  if ($fileinfo->isFile() && $fileinfo->getExtension() == 'html') {
-    $files[] = $fileinfo->getFilename();
+  foreach ($directory as $fileinfo) {
+    if ($fileinfo->isFile() && $fileinfo->getExtension() == 'html') {
+      $files[] = $fileinfo->getFilename();
+    }
   }
-}
-?>
-<div class="container"></div>
+  sort($files);
+  ?>
+  <div class="container"></div>
   <div class="row">
-    <div class="col-md-3">
-      <ul class="list-group">
+    <div class="col-md-2">
+      <div id="search-container"></div>
+      <ul class="list-group" id="file-list">
         <?php foreach ($files as $file): ?>
           <li class="list-group-item">
-            <a href="demoset.php?demo=<?php echo $file; ?>"><?php echo $file; ?></a>
+            <a href="demoset.php?demo=<?php echo $file; ?>"><?php echo pathinfo($file, PATHINFO_FILENAME); ?></a>
           </li>
         <?php endforeach; ?>
       </ul>
-    </div>
-    <div class="col-md-9">
-      <div id="content">
-        <?php
-        if (isset($_GET['demo']) && in_array($_GET['demo'], $files)) {
-          $demoFile = $_GET['demo'];
-          $demoContent = file_get_contents(dirname(__FILE__) . '/demos/' . $demoFile);
-          echo $demoContent;
+      <script type="text/javascript">
+        class Search extends React.Component {
+          constructor(props) {
+            super(props);
+            this.state = { query: '' };
+          }
+
+          handleChange = (event) => {
+            this.setState({ query: event.target.value }, () => {
+              this.filterList();
+            });
+          };
+
+          filterList = () => {
+            const query = this.state.query.toLowerCase();
+            const items = document.querySelectorAll('#file-list .list-group-item');
+            items.forEach((item) => {
+              const text = item.textContent.toLowerCase();
+              item.style.display = text.includes(query) ? '' : 'none';
+            });
+          };
+
+          render() {
+            return (
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Search..."
+                value={this.state.query}
+                onChange={this.handleChange}
+              />
+            );
+          }
         }
-        ?>
+
+        ReactDOM.render(<Search />, document.getElementById('search-container'));
+      </script>
+    </div>
+    <div class="col-md-10">
+      <div id="content">
+        <div style="border: 1px solid #ccc; padding: 10px;">
+          <?php
+          if (isset($_GET['demo']) && in_array($_GET['demo'], $files)) {
+            $demoFile = $_GET['demo'];
+            $demoContent = file_get_contents(dirname(__FILE__) . '/demos/' . $demoFile);
+            echo $demoContent;
+          }
+          ?>
+        </div>
       </div>
     </div>
   </div>
 </div>
 
-<script>
-function loadContent(file) {
-  fetch('demos/' + file)
-    .then(response => response.text())
-    .then(data => {
-      document.getElementById('content').innerHTML = data;
-    });
-}
-</script>
-
-  </div>
-  <?php include("template/$OJ_TEMPLATE/footer.php"); ?>
+</div>
+<?php include("template/$OJ_TEMPLATE/footer.php"); ?>