javascript - 如何从 javascript 对象获取多个响应

Question

我有下面的代码来搜索 javascript 对象中列出的歌曲。当我希望它返回每个匹配结果时，它只返回一个结果。而且，当我开始输入时，它就会开始搜索，但我希望它在输入三个或更多字母后进行搜索。

这是 html:

<form>
    <h3>Music Search</h3>
        <input id="songname" type="text" autocomplete="off">       
        </form>

<div id="containera">
<div id="fullpath"></div>
</div>

这是js:

$(function () {
    var data = {
        "music": [{
        "Title": "",
        "Fullpath": ""
        },
        {
        "Title": "TNT",
        "Fullpath": "Audio\Albums\AC DC\TNT\Tnt.mp3"
  },
  {
  "Title": "03 - Wasted Sleepless Nights_Dark Room.mp3",
  "Fullpath": "Audio/Albums/Angels/Dark Room/03 - Wasted Sleepless Nights_Dark Room.mp3"
  },
  {
  "Title": "03 - Wasted Sleepless Nights.mp3",
  "Fullpath": "Audio/Albums/Angels/Dark Room/03 - Wasted Sleepless Nights_Dark Room.mp3"
  }, {
  "Title": "Iron Maiden - Wasted Years.mp3",
  "Fullpath": "Audio/Singles/Iron Maiden/Wasted Years.mp3"
  }]   
    };

var getProperties = function (Title) {
        return data.music.filter(function (elem) {
            var expTitle = Title.indexOf(elem.Title) >= 0;
            var expTitle = elem.Title.toUpperCase().indexOf

(Title.toUpperCase()) >= 0;
            return expTitle
        });
    }

    $("#songname").on("input paste",function() {
        var Title = $("#songname").val();
       var properties = getProperties(Title);

if (properties.length == 0) 
 {
$( "#title" ).empty();
$( "#fullpath" ).empty();
}
else {

    $("#title").text(properties[0].Title);
        $("#fullpath").html("<a href=\"file:///"+properties[0].Fullpath+"\">"+properties[0].Title+"<\/a>");

}
    });
});

我对 jquery 很陌生，可以做一些简单的事情，但我无法解决这个问题。这是本地共享计算机上的。我有一个jsfiddle如果有帮助的话。如果有任何帮助，我将不胜感激。

Answer 1

将歌曲标题添加到 html 时，需要使用append 而不是html。您还需要迭代结果以显示所有歌曲标题，如下面的代码。

我还在您的 HTML 中添加了一个 UL 列表，以在列表中显示标题。

$(function() {
  var data = {
    "music": [{
      "Title": "",
      "Fullpath": ""
    }, {
      "Title": "TNT",
      "Fullpath": "Audio\Albums\AC DC\TNT\Tnt.mp3"
    }, {
      "Title": "03 - Wasted Sleepless Nights_Dark Room.mp3",
      "Fullpath": "Audio/Albums/Angels/Dark Room/03 - Wasted Sleepless Nights_Dark Room.mp3"
    }, {
      "Title": "03 - Wasted Sleepless Nights.mp3",
      "Fullpath": "Audio/Albums/Angels/Dark Room/03 - Wasted Sleepless Nights_Dark Room.mp3"
    }, {
      "Title": "Iron Maiden - Wasted Years.mp3",
      "Fullpath": "Audio/Singles/Iron Maiden/Wasted Years.mp3"
    }]
  };


  var getProperties = function(Title) {
    return data.music.filter(function(elem) {
      var expTitle = Title.indexOf(elem.Title) >= 0;
      expTitle = elem.Title.toUpperCase().indexOf(Title.toUpperCase()) >= 0;
      return expTitle;
    });
  }

  $("#songname").on("input paste", function() {
    var Title = $("#songname").val();
    if (Title.length < 3) {
      return false;
    }

    var properties = getProperties(Title);

    if (properties.length == 0) {
      $("#folder").empty();
      $("#subfolder").empty();
      $("#artist").empty();
      $("#album").empty();
      $("#number").empty();
      $("#title").empty();
      $("#fullpath").empty();
    } else {

      console.log(properties);


      //HERE IS THE ITERATION
      for (var i = 0; i < properties.length; i++) {
        $("#cover").html("<img src=\" " + properties[i].Poster + " \" alt=\"\" width=\"100\">");
        $("#folder").text(properties[i].Folder);
        $("#subfolder").text(properties[i].SubFolder);
        $("#artist").text(properties[i].Artist);
        $("#album").text(properties[i].Album);
        $("#number").text(properties[i].Number);
        $("#title").text(properties[i].Title);

        $("#fullpath ul").append("<li><a href=\"file:///" + properties[i].Fullpath + "\">" + properties[i].Title + "<\/a></li>");
      }

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h3>Music Search</h3>
  <input id="songname" type="text" autocomplete="off">
</form>

<div id="containera">
  <div id="fullpath">
    <ul>
    
    </ul>
  </div>
</div>
<p>
  <p>
    Typing "wasted" should return all matches, three matches in this test. At the moment it only returns one. Also need to only search after three characters or more are entered.
  </p>