新增本地音乐模糊搜索

xiaomusic/static/app.js

@@ -64,4 +64,26 @@ $(function(){
       }
     });
   }
+
+  // 监听输入框的输入事件
+  $("#music-name").on('input', 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");
+        });
+      }
+    });
+  });
 });

xiaomusic/static/index.html

@@ -44,7 +44,8 @@
     </div>
     <hr>
     <div>
-      <input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)"></input>
+      <datalist id="autocomplete-list"></datalist>
+      <input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)" list="autocomplete-list"></input>
       <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)"></input>
       <button id="play">播放</button>
     </div>