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

xiaomusic/static/default/app.js

@@ -281,34 +281,55 @@ $(function(){
   }
 
 	// 监听输入框的输入事件
-	function debounce(func, delay) {
+  function debounce(func, delay) {
 		let timeout;
 		return function(...args) {
 			clearTimeout(timeout);
 			timeout = setTimeout(() => func.apply(this, args), delay);
 		};
 	}
-  $("#music-name").on('input', debounce(function() {
-    var inputValue = $(this).val();
-    // 发送Ajax请求
-    $.ajax({
-      url: "/searchmusic", // 服务器端处理脚本
-      type: "GET",
-      dataType: "json",
-      data: {
-        name: inputValue
-      },
-      success: function(data) {
-        // 清空datalist
-        $("#autocomplete-list").empty();
-        // 添加新的option元素
-        $.each(data, function(i, item) {
-          $('<option>').val(item).appendTo("#autocomplete-list");
-        });
-      }
-    });
-    },300));
 
+  const searchInput = document.getElementById('search');
+  const musicSelect = document.getElementById('music-name');
+
+  searchInput.addEventListener('input', debounce(function() {
+    const query = searchInput.value.trim();
+
+    if (query.length === 0) {
+      musicSelect.innerHTML = '';
+      return;
+    }
+
+    fetch(`/searchmusic?name=${encodeURIComponent(query)}`)
+      .then(response => response.json())
+      .then(data => {
+        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));
+	
   function get_playing_music() {
     $.get(`/playingmusic?did=${did}`, function(data, status) {
       console.log(data);

xiaomusic/static/default/index.html

@@ -50,8 +50,14 @@ var vConsole = new window.VConsole();
     </div>
     <hr>
     <div class="rows">
-      <datalist id="autocomplete-list"></datalist>
-      <input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)" list="autocomplete-list"></input>
+      <label for="search">搜索歌曲:</label>
+      <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>