我如何从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

添加条件以验证输入值的长度仅在> 3时才继续进行。

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

其次， properties已经具有多个值，您只需要更改循环即可。

https://jsfiddle.net/k7rwa4​​uo/

$(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();
    if (Title.length < 3) {
      return false;
    }
    var properties = getProperties(Title);

    $("#fullpath").html("");

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

      console.log(properties);

      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").append("<a href=\"file:///" + properties[i].Fullpath + "\">" + properties[i].Title + "<\/a><br/>");

      }

      // $("#fullpath1").html("<a href=\"file:///c:/"+properties[0].Folder +"\/"+properties[0].SubFolder+"\/"+properties[0].Artist+"\/"+properties[0].Album+"\/"+properties[0].Number+" - "+properties[0].Title+"."+properties[0].Type+"\">"+properties[0].Title+"<\/a>");

    }
  });
});

Answer 2

将歌曲标题添加到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> 

Answer 3

之所以返回一个第一个结果的问题是因为在属性中，您仅分配了第[0]个索引值，进行了循环并分配了它。 另外，由于过滤不正确

 return data.music.filter(function (elem) {
var MatchingTitle = []; // creating a array to holding all matching values
if(elem.Title.indexOf(Title)>=0){
MatchingTitle.push(elem.Title);
}
 //           var expTitle = Title.indexOf(elem.Title) >= 0;
   //         var expTitle = elem.Title.toUpperCase().indexOf

//(Title.toUpperCase()) >= 0;
            return MatchingTitle.join(''); // use this
        });


alert(properties.length);
    $("#cover").html("<img src=\" " + properties[0].Poster + " \" alt=\"\" width=\"100\">");
    $("#folder").text(properties[0].Folder);
    $("#subfolder").text(properties[0].SubFolder);