refactor: 优化默认UI的搜索框#226 (#227)

xiaomusic/static/default/app.js

@@ -288,24 +288,45 @@ $(function(){
 			timeout = setTimeout(() => func.apply(this, args), delay);
 		};
 	}
-  $("#music-name").on('input', debounce(function() {
+
-    var inputValue = $(this).val();
+  const searchInput = document.getElementById('search');
-    // 发送Ajax请求
+  const musicSelect = document.getElementById('music-name');
-    $.ajax({
+
-      url: "/searchmusic", // 服务器端处理脚本
+  searchInput.addEventListener('input', debounce(function() {
-      type: "GET",
+    const query = searchInput.value.trim();
-      dataType: "json",
+
-      data: {
+    if (query.length === 0) {
-        name: inputValue
+      musicSelect.innerHTML = '';
-      },
+      return;
-      success: function(data) {
+    }
-        // 清空datalist
+
-        $("#autocomplete-list").empty();
+    fetch(`/searchmusic?name=${encodeURIComponent(query)}`)
-        // 添加新的option元素
+      .then(response => response.json())
-        $.each(data, function(i, item) {
+      .then(data => {
-          $('<option>').val(item).appendTo("#autocomplete-list");
+        musicSelect.innerHTML = ''; // 清空现有选项
+
+        // 添加用户输入作为一个选项
+        const userOption = document.createElement('option');
+        userOption.value = query;
+        userOption.textContent = `使用关键词联网搜索: ${query}`;
+        musicSelect.appendChild(userOption);
+
+        if (data.length === 0) {
+          const option = document.createElement('option');
+          option.textContent = '没有匹配的结果';
+          option.disabled = true;
+          musicSelect.appendChild(option);
+        } else {
+          data.forEach(song => {
+            const option = document.createElement('option');
+            option.value = song
+            option.textContent = song
+            musicSelect.appendChild(option);
           });
         }
+      })
+      .catch(error => {
+          console.error('Error fetching data:', error);
       });
   }, 300));
 	

xiaomusic/static/default/index.html

@@ -50,8 +50,14 @@ var vConsole = new window.VConsole();
     </div>
     <hr>
     <div class="rows">
-      <datalist id="autocomplete-list"></datalist>
+      <label for="search">搜索歌曲:</label>
-      <input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)" list="autocomplete-list"></input>
+      <input type="text" id="search" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">
+
+      <label for="music-name">确认选择:</label>
+      <select id="music-name">
+          <!-- 动态生成选项 -->
+      </select>
+
       <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)"></input>
       <div style="display: flex; align-items: center">
         <progress id="progress" value="0" max="100" style="width: 270px"></progress>