搜索下拉框样式及绑定逻辑

src/views/AIDevelop.vue

@@ -73,15 +73,28 @@
         </div>
         <div class="inner-box right-box">
           <div class="top-right-box">
-            <el-input
+            <el-autocomplete
               v-model="SearchInput"
-              class="search-input"
+              :fetch-suggestions="querySearch"
               placeholder="搜索"
+              @select="handleSearchSelect"
+              class="search-input"
+              value-key="title"
+              :trigger-on-focus="false"
             >
               <template #prefix>
                 <el-icon class="el-input__icon"><search /></el-icon>
               </template>
-            </el-input>
+              <template #popper-append-to-body>
+                <el-option
+                  class="scrollbar"
+                  v-for="item in filteredTitles"
+                  :key="item.key"
+                  :label="item.title"
+                  :value="item"
+                ></el-option>
+              </template>
+            </el-autocomplete>
           </div>
         </div>
       </div>
@@ -240,7 +253,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onUnmounted, onBeforeUnmount,computed} from 'vue'
 import { useRouter } from 'vue-router'
 import { Expand, Fold, Memo } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
@@ -264,8 +277,7 @@ import { Message } from '@/utils/message/Message.js'
 // let hls = null
 
 const router = useRouter() // 获取当前路由对象
-// 搜索框
-const SearchInput = ref('')
+
 // 添加按钮显示状态
 const buttonVisible = ref(false)
 // 添加抽屉显示状态
@@ -644,11 +656,52 @@ const simulateAIResponse = question => {
     }, 1000)
   })
 }
-
 // 关闭AI对话弹出框
 const handleCloseAIDialog = () => {
   showAIDialog.value = false
 }
+
+// 搜索框
+const SearchInput = ref('')
+// 添加搜索建议查询方法
+const querySearch = (queryString, cb) => {
+  const sections = getAllCourseSections();
+  const results = queryString
+    ? sections.filter(section => 
+        section.title.toLowerCase().includes(queryString.toLowerCase())
+      )
+    : sections;
+  cb(results);
+};
+const filteredTitles = computed(() => {
+  const sections = getAllCourseSections();
+  if (!SearchInput.value) {
+    return sections;
+  }
+  return sections.filter(section =>
+    section.title.toLowerCase().includes(SearchInput.value.toLowerCase())
+  );
+});
+const handleSearchSelect = (item) => {
+  handleSelect(item.key);
+    // 添加以下代码清空输入框
+  SearchInput.value = '';
+};
+// 添加课程小节数据提取方法
+const getAllCourseSections = () => {
+  let sections = [];
+  const traverse = (items) => {
+    items.forEach(item => {
+      if (item.children) {
+        traverse(item.children);
+      } else {
+        sections.push({ title: item.title, key: item.key });
+      }
+    });
+  };
+  traverse(menuItems.value);
+  return sections;
+};
 </script>
 
 <style scoped lang="scss">
@@ -894,15 +947,17 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 }
 .top-right-box {
   position: absolute; // 添加绝对定位
-  margin-top: rpx(9); // 调整上边距离
-  margin-right: rpx(50); // 调整右边距离
-  width: 100%; // 设置盒子宽度，可按需调整
-  height: 60px; // 设置盒子高度，可按需调整
+  // margin-top: rpx(9); // 调整上边距离
+   margin-left: rpx(260); // 调整右边距离
+  width: rpx(100); // 设置盒子宽度，可按需调整
+  // height: 60px; // 设置盒子高度，可按需调整
   display: flex;
   justify-content: flex-end;
 }
 .top-right-box {
   ::v-deep(.el-input__wrapper) {
+    height: rpx(15);
+    font-size: rpx(6);
     background-color: rgb(255, 255, 255, 0.5);
     border-radius: rpx(12);
     border: white 1px solid;
@@ -1455,3 +1510,40 @@ video::-webkit-media-controls-panel {
   }
 }
 </style>
+
+<style lang="scss">
+// 搜索下拉框样式
+@use 'sass:math';
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+/* 消除小三角 */
+.el-popper__arrow {
+  display: none;
+}
+.el-popper.is-light,
+.el-dropdown__popper.el-popper {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+.el-dropdown__popper {
+  --el-dropdown-menuItem-hover-color: none;
+}
+.el-autocomplete-suggestion .el-scrollbar__wrap {
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 2px solid white;
+  border-radius: rpx(5);
+  backdrop-filter: blur(rpx(5));
+}
+.el-autocomplete-suggestion li {
+  color: black;
+  font-size: rpx(7);
+  padding: rpx(5) rpx(8); // 调整下拉项内边距
+}
+.el-autocomplete-suggestion li:hover {
+  background: linear-gradient(to bottom, #ffefb0, #ffcc00);
+}
+</style>

src/views/AIGeneralCourse.vue

@@ -81,15 +81,29 @@
         </div>
         <div class="inner-box right-box">
           <div class="top-right-box">
-            <el-input
+            <el-autocomplete
               v-model="SearchInput"
-              class="search-input"
+              :fetch-suggestions="querySearch"
               placeholder="搜索"
+              @select="handleSearchSelect"
+              class="search-input"
+              value-key="ctType"
+              :trigger-on-focus="false"
             >
               <template #prefix>
                 <el-icon class="el-input__icon"><search /></el-icon>
               </template>
-            </el-input>
+              <!-- 添加下拉项模板 -->
+              <template #popper-append-to-body>
+                <el-option
+                class="scrollbar"
+                  v-for="item in filteredTitles"
+                  :key="item.id"
+                  :label="item.ctType"
+                  :value="item"
+                ></el-option>
+              </template>
+            </el-autocomplete>
           </div>
         </div>
       </div>
@@ -131,6 +145,7 @@ import {
   Tickets
 } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
+import { ElAutocomplete } from 'element-plus' // 导入ElAutocomplete组件
 
 import { useRouter } from 'vue-router'
 
@@ -226,12 +241,29 @@ import { Message } from '@/utils/message/Message.js'
 
 // 搜索框
 const SearchInput = ref('')
-// 添加筛选后的课程标题数组
+// 添加搜索建议查询方法
+const querySearch = (queryString, cb) => {
+  const results = queryString
+    ? classOutlineData.value.filter(item => {
+        return item.ctType.toLowerCase().includes(queryString.toLowerCase())
+      })
+    : classOutlineData.value
+  cb(results)
+}
+// 添加搜索选择处理方法
+const handleSearchSelect = item => {
+  goToAIExperience(item)
+    // 添加以下代码清空输入框
+  SearchInput.value = '';
+}
+// 修改过滤逻辑，直接使用classOutlineData
 const filteredTitles = computed(() => {
   if (!SearchInput.value) {
-    return courseTitles
+    return classOutlineData.value
   }
-  return courseTitles.filter(title => title.includes(SearchInput.value))
+  return classOutlineData.value.filter(title =>
+    title.ctType.toLowerCase().includes(SearchInput.value.toLowerCase())
+  )
 })
 
 // 添加按钮显示状态
@@ -295,16 +327,6 @@ const goToAIExperience = outlineData => {
   ); /* 设置悬停、聚焦、点击状态下的背景色 */
   gap: rpx(0);
 }
-// // 添加新的容器样式
-// .sidebar-wrapper {
-//   display: flex;
-//   align-items: stretch;
-//   transition: all 0.3s ease;
-// }
-// // 折叠状态样式
-// .sidebar-wrapper.collapsed .icon-expand {
-//   border-radius: 0 4px 4px 0;
-// }
 .sidebar-layout {
   display: flex;
   flex-direction: row;
@@ -552,15 +574,15 @@ const goToAIExperience = outlineData => {
 }
 .top-right-box {
   position: absolute; // 添加绝对定位
-  margin-top: rpx(10); // 调整上边距离
-  margin-right: rpx(50); // 调整右边距离
-  width: 100%; // 设置盒子宽度，可按需调整
-  height: 60px; // 设置盒子高度，可按需调整
+  margin-left: rpx(260); // 调整右边距离
+  width: rpx(100);
   display: flex;
   justify-content: flex-end;
 }
 .top-right-box {
   ::v-deep(.el-input__wrapper) {
+    height: rpx(15);
+    font-size: rpx(6);
     background-color: rgb(255, 255, 255, 0.5);
     border-radius: rpx(12);
     border: white 1px solid;
@@ -578,11 +600,19 @@ const goToAIExperience = outlineData => {
     color: black;
   }
 }
+// 搜索
 .search-input {
-  width: rpx(100);
-  height: rpx(15);
-  font-size: rpx(7);
+  width: rpx(200); // 增加搜索框宽度
+  height: rpx(30); // 增加搜索框高度
+  font-size: rpx(9);
+  border-radius: rpx(8); // 添加圆角
+  border: 1px solid #dcdfe6; // 添加边框
 }
+::v-deep(.el-input__inner) {
+  color: #333; // 调整文字颜色
+}
+
+
 .box-2 {
   width: 100%;
   flex: 1;
@@ -642,3 +672,31 @@ const goToAIExperience = outlineData => {
   --el-dropdown-menuItem-hover-color: none;
 }
 </style>
+
+<style lang='scss'>
+// 搜索下拉框样式
+@use 'sass:math';
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+ .el-autocomplete-suggestion .el-scrollbar__wrap{
+  margin: 0 auto;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 2px solid white;
+  border-radius: rpx(5);
+  backdrop-filter: blur(rpx(5));
+}
+ .el-autocomplete-suggestion li{
+  color: black;
+  font-size: rpx(7);
+  padding: rpx(5) rpx(8); // 调整下拉项内边距
+}
+ .el-autocomplete-suggestion li:hover{
+  background: linear-gradient(
+    to bottom,
+    #ffefb0,
+    #ffcc00
+  );
+}
+</style>