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

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

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

我已经创建了一个委托的监听器来监听每个显示结果行的按钮点击。如何让按钮对创建结果行的对象中包含的“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>");
            } 

        }
    });

var multiArr=[
{标签：“尽快岩石”，歌曲：“国家”，索引：0}，
{标签：“蕾哈娜”，歌曲：“雨伞”，索引：1}，
{标签：“酷玩”，歌曲：“天堂”，索引：2}]；
$（'#results'）。在（“单击”、“.result按钮”上，函数（事件）{
警报（“您单击了：“+event.target.nodeName”）；
console.dir（$（this.text））；
});
$（“#finder”）.keyup（函数（e）{
var q=$（“#finder”）.val（）；
console.log（“搜索栏内容：+q”）；
var模式=新的RegExp（“^”+q，“i”）；
$（“#结果”）.empty（）；
对于（变量i=0；i“+multiArr[i].label+”；
} 
}
});

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

按照顺序，您将添加到结果按钮div，在其中附加到#results，即：

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

现在，为了以防万一，这不等于总数，因为我决定通过改进一些代码来帮助您。我所做的主要改进是，我的示例不会在每次过滤器更改时重新创建html。取而代之的是，所有数据都会在页面的开头追加到页面中，然后根据标签文本将其隐藏或显示。此外，我还更改了构建元素的方式，以便于将来进行编辑

JSFiddle：

HTML:

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

JS:

$（文档）.ready（函数（）{
//设置测试数据
var multiArr=[
{
标签：“尽快，洛基”，
歌曲：“国家”，
索引：0
},
{
标签：“蕾哈娜”，
歌曲：“雨伞”，
索引：1
},
{
标签：“酷玩”，
歌曲：“天堂”，
索引：2
}
]; 
//最初将其全部附加到#结果页面
对于（var i=0；i”）
)
)
).附加(
$（“”）。附加(
$（“”+multiArr[i].label+“
”）
)
).附加(
$（“播放”）
)
)
);      
}
//点击播放按钮
$（'#results'）。在（“单击”、“.result按钮”上，函数（事件）{
console.log（$（this.data（“id”））；
}); 
//仅显示匹配过滤器的标签
$（“#finder”）.keyup（函数（e）{
var q=$（“#finder”）.val（）；
var模式=新的RegExp（“^”+q，“i”）；
$（“#结果”）.children（）.each（函数（子函数）{
var label=$（this.find（“.result song artist p”）.html（）；
if（模式测试（标签））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});  
});
}); 

只需在按钮中添加一个数据索引属性，该属性的索引为在multiArr中匹配的i，然后在Listener中检索该属性。我认为我的做法是为每个结果添加一个id等于索引的div。然后在每个div上添加click侦听器。我最终得出的结论是，我应该添加一个div，其中包含您提到的索引值。但我做得不那么优雅。作为纯文本。我肯定会实施您关于创建包含索引值的div id标记的建议。关于呈现所有结果并按要求显示它们，当有200首歌曲（对象）时，不在每次过滤器更改时重新绘制html的性能优势是否仍然存在？是的。假设有200首歌。按照您的方法，生成这200个div所需的所有HTML都将在过滤器的每个新字母上重新创建。使用我给出的方法，只需搜索200个div、比较regex和hide/show。除了初始化之外，我的方法中没有HTML生成。此外，您可以通过使用循环将200个对象附加到multiArr中来测试我的理论。记录对象计数增加时的运行时，并将其绘制成图表。永远不要揣测业绩；写一份概念证明以确保它的性能。如果它解决了你的问题，请记住接受我的答案=）毫不奇怪，你是对的：）。我会作出全面修订。但是，我想知道是否希望在输入搜索字符串之前显示所有结果。这是否是好的用户体验设计。

$(this).data("id")

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

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