How do I get multiple responses form javascript object

Question

I have the code below to search for songs listed in a javascript object. It only returns one result when I would like it to return every matching result. Also it starts searching as soon as I start typing, but I would like it to search after three or more letters are typed.

This is the html:

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

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

This is the 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>");

}
    });
});

I'm pretty new to jquery and can do some simple stuff, but I can't work this out. This is local on a shared computer. I have a jsfiddle if it helps. I would be greatful for any help.

Answer 1

Add the condition to verify the input value length to proceed only if > 3.

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

Secondly properties is already having multiple value, you just need to change looping.

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

You need to use append instead of html when you are adding the song titles to your html. You also need to iterate the result to display all the song titles like the code below.

I also added a UL-list to your HTML to display the titles in a list.

 $(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

The problem why it is returning one first result is because in properties, you are assigning the [0]th index value only, you have loop it and assign it. Also, for filtering is nor proper in get

 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);