[来自数组的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

一种简单的解决方案是先将数据属性附加到结果按钮本身，然后在您的点击回调中获取该数据，其中您所附加的数据是元素的索引值。

按顺序，您将在结果按钮div中添加到#results的末尾，即：

"<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();
            }
        });  
    });
});