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

添加条件以验证输入值长度仅在＆gt; 3。

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

其次properties已经有多个值，你只需要改变循环。

https://jsfiddle.net/k7rwa4uo/

$(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]个索引值，您已经循环它并分配它。此外，过滤在获取

时也是正确的

echo

如何从javascript对象获得多个响应

3 个答案: