来自数组的jQuery动态搜索结果

Question

我有一个创建的动态搜索，它从输入表单中获取数据并搜索匹配对象数组。这些匹配（如果存在的话）会显示在结果的一行上，同时还会显示一个“按钮”以点击该特定搜索结果行上的操作。

数组中的每个对象都对应于结果的一行，假定搜索项在该对象中找到。

我已经创建了一个委托侦听器来侦听每个显示的结果行按钮的点击。我如何获得按钮来处理创建该行结果的对象中包含的'index：number'。

到目前为止我的代码是一种如下：

var multiArr = [ 
{label: "Asap Rocky", song: "National", index: 0}, 
{label: "Rihanna", song: "Umbrella", index: 1}, 
{label: "Coldplay", song: "Paradise", index: 2}]; 



$('#results').on("click", ".result-button", function(event) { 
    alert("You clicked:" + event.target.nodeName); 
    console.dir($(this).text); 
}); 




$("#finder").keyup(function(e){ 
     var q = $("#finder").val(); 
     console.log("Search Bar contents: " + q); 

     var pattern = new RegExp("^" + q, "i"); 

     $("#results").empty(); 

     for (var i = 0; i < multiArr.length; i++){ 

      console.log("Checking for " + q + " in " + multiArr[i].label); 
      console.log("The above is " + pattern.test(multiArr[i].label)); 

      if (pattern.test(multiArr[i].label)) { 
       console.log("something in here beings with " + q); 

       /*console.log("Img Url: " + thaArr);*/ 
       //do something 
       $("#results").append("<div class='result-line'><div class='result-img'><img src='http://img.youtube.com/vi/36wDeLKKoXE/default.jpg' class='center-result-img'></div><div class='result-song-info'><div class='result-song-title'><p>" + multiArr[i].song + "</p></div><div class='result-song-artist'><p>" + multiArr[i].label + "</p></div></div><div class='result-button'>>></div></div>"); 
      } 

     } 
    }); 

Answer 1

一个简单的解决办法是将数据属性首先重视的结果，按钮本身，然后获取你的点击回调，其中数据你的数据附加的是你的元素的索引值。

为了话，你会添加到您追加到#results结果按钮DIV，就是这样的：

"<div class='result-button'>" 

下列数据属性：

"<div class='result-button' data-id='" + multiArr[i].index + "'>" 

然后，在您的点击回拨中，您可以使用此简单地获得该ID：

$(this).data("id") 

现在，为了防止这种情况不能完成，我决定通过改进代码来帮助你多一点。我做的主要改进是我的示例不会在每次过滤器更改时重新创建html。相反，所有数据都会在开始时附加到页面上，然后根据标签文本将其隐藏或显示。另外，我改变了构建元素的方式，以便将来更易于编辑。

的jsfiddle：http://jsfiddle.net/seibert_cody/j4rqdh8L/

HTML：

<input id="finder" type="text"> 
<div id="results"></div> 

JS：

$(document).ready(function(){ 
    // Set up the test data 
    var multiArr = [ 
     { 
      label: "Asap Rocky", 
      song: "National", 
      index: 0 
     }, 
     { 
      label: "Rihanna", 
      song: "Umbrella", 
      index: 1 
     }, 
     { 
      label: "Coldplay", 
      song: "Paradise", 
      index: 2 
     } 
    ]; 

    // Append it all to the #results page initially 
    for (var i = 0; i < multiArr.length; i++){ 
     $("#results").append(
      $("<div class='result-line'></div>").append(
       $("<div class='result-img'></div>").append(
        $("<img src='http://img.youtube.com/vi/36wDeLKKoXE/default.jpg' class='center-result-img'>") 
       ).append(
        $("<div class='result-song-info'></div>").append(
         $("<div class='result-song-title'></div>").append(
          $("<p>" + multiArr[i].song + "</p>") 
         ) 
        ) 
       ).append(
        $("<div class='result-song-artist'></div>").append(
         $("<p>" + multiArr[i].label + "</p>") 
        ) 
       ).append(
        $("<div class='result-button' data-id='" + multiArr[i].index + "'>Play</div>") 
       ) 
      ) 
     );  
    } 

    // Clicked on the play button 
    $('#results').on("click", ".result-button", function(event){ 
     console.log($(this).data("id")); 
    }); 


    // Only show the labels matching filter 
    $("#finder").keyup(function(e){ 
     var q = $("#finder").val(); 
     var pattern = new RegExp("^" + q, "i"); 

     $("#results").children().each(function(child){ 
      var label = $(this).find(".result-song-artist p").html(); 
      if (pattern.test(label)){ 
       $(this).show(); 
      }else{ 
       $(this).hide(); 
      } 
     }); 
    }); 
});