Javascript 如何创建与输入文本匹配的搜索栏并仅显示属性中包含该文本的图像（href）？？？JQuery

正在尝试创建搜索栏。。。当用户在输入字段中写入文本时，我只想显示那些在标题中包含文本的图像（它们的href）（它们都有标题，并且这些标题作为属性添加到它们中）。。。 这是代码。。。lightbox.option只是一个图片插件

const mainDiv = $('<div></div>').addClass('wrapper');
mainDiv.appendTo('body');

const input = $('<input>').attr({'id':'searchInput','type':'text','placeholder':'Search(16pt)'});
input.appendTo(mainDiv);

const imgsMainWrap = $('<div></div>').addClass('imgsWrpaer');
imgsMainWrap.appendTo(mainDiv);

const captions = [
    '',
    'I love hay bales. Took this snap on a drive through the countryside past some straw fields.',
    'The lake was so calm today. We had a great view of the snow on the mountains from here.',
    'I hiked to the top of the mountain and got this picture of the canyon and trees below',
    'It was amazing to see an iceberg up close, it was so cold but didn’t snow today.',
    'The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.',
    'Fall is coming, I love when the leaves on the trees start to change color.',
    'I drove past this plantation yesterday, everything is so green!',
    'My summer vacation to the Oregon Coast. I love the sandy dunes!',
    'We enjoyed a quiet stroll down this countryside lane.',
    'Sunset at the coast! The sky turned a lovely shade of orange.',
    'I did a tour of a cave today and the view of the landscape below was breathtaking.',
    'I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.' 
]


for(let i =1; i <= 12; i++){
    const innerImgWrapper = $('<div></div>').addClass('innerImgWrapper');
    $(innerImgWrapper).appendTo(imgsMainWrap);

    const links = $('<a></a>').attr({'href':'photos/0' + [i] + '.jpg','data-lightbox':'images', 'data-title': captions[i]});
    if(i > 9){
        links.attr('href','photos/' + [i] + '.jpg');
    }
    $(links).appendTo(innerImgWrapper);

    const img = $('<img>').attr({'src':'photos/0'+[i]+'.jpg'});
    if(i > 9){
        img.attr({'src':'photos/'+[i]+'.jpg'});
    }
    $(img).appendTo(links);


    input.on('keyup', function(){
        const inputValue = $(input).val().toLowerCase();
        const captions = $(links).attr('data-title');
        if(captions.indexOf(inputValue) != -1){
            ???????????
        }
    // }
    });
}


// Next comes the fun part. Start trying to find ways to check if the current value of the
// search input is included within any of the captions, and if so, log the associated image
// to the console.



lightbox.option();

const mainDiv=$（''）.addClass（'wrapper'）；
主要部门附录（“主体”）；
常量输入=$（''）.attr（{'id'：'searchInput'，'type'：'text'，'placeholder'：'Search（16pt）}）；
输入。附件（mainDiv）；
常量imgsMainWrap=$（''）.addClass（'imgsWrpaer'）；
imgsMainWrap.appendTo（mainDiv）；
常量标题=[
'',
“我喜欢干草捆。这张照片是在开车穿过乡村经过一些麦田时拍的。”，
“今天湖水很平静。从这里我们可以很好地看到山上的雪。”，
“我登上山顶，拍下了这张峡谷和下面树木的照片”，
“近距离看到冰山真是太神奇了，当时很冷，但今天没有下雪。”，
“红崖很美。沙漠里很热，但我们在峡谷里走了很多路。”，
“秋天来了，我喜欢树上的叶子开始变色。”，
“我昨天开车经过这个种植园，一切都是那么的绿！”，
“我去俄勒冈州海岸的暑假。我喜欢沙丘！”，
“我们在这条乡间小路上静静地散步。”，
“海岸的夕阳！天空变成了可爱的橙色。”，
“我今天参观了一个山洞，下面的景色令人叹为观止。”，
“我穿过这片风铃草草地，在大雾来临之前，把山上的雪看得一清二楚。”
]
for（设i=1；i=9）{
links.attr（'href'，'photos/'+[i]+'.jpg'）；
}
$（链接）.appendTo（innerImgWrapper）；
常量img=$（'9）{
img.attr（{'src'：'photos/'+[i]+'.jpg'}）；
}
$（img）.附件（链接）；
input.on（'keyup'，function（）{
常量inputValue=$（input.val（）.toLowerCase（）；
常量标题=$（links）.attr（'data-title'）；
if（标题.索引of（输入值）！=-1）{
???????????
}
// }
});
}
//接下来是有趣的部分。开始尝试寻找方法来检查
//搜索输入包含在任何标题中，如果是，则记录相关图像
//到控制台。
option（）；

您可以使用数据属性选择器

*

，它在数据-*属性中的任何位置查找匹配字符

以下是可以使用的其他数据选择器类型的列表（）：

此外，您还需要将输入

keyup

事件置于循环之外，以便它不会多次附加到同一元素

逻辑是使用

.hide（）

隐藏搜索中的元素，然后使用

.show（）

显示使用数据选择器过滤的元素

请参见此示例：

const mainDiv=$（''）.addClass（'wrapper'）；
主要部门附录（“主体”）；
常量输入=$（''）.attr({
“id”：“searchInput”，
“类型”：“文本”，
'占位符'：'搜索（16pt）'
});
输入。附件（mainDiv）；
常量imgsMainWrap=$（''）.addClass（'imgsWrpaer'）；
imgsMainWrap.appendTo（mainDiv）；
常量标题=[
'',
“我喜欢干草捆。这张照片是在开车穿过乡村经过一些麦田时拍的。”，
“今天湖水很平静。从这里我们可以很好地看到山上的雪。”，
“我登上山顶，拍下了这张峡谷和下面树木的照片”，
“近距离看到冰山真是太神奇了，当时很冷，但今天没有下雪。”，
“红崖很美。沙漠里很热，但我们在峡谷里走了很多路。”，
“秋天来了，我喜欢树上的叶子开始变色。”，
“我昨天开车经过这个种植园，一切都是那么的绿！”，
“我去俄勒冈州海岸的暑假。我喜欢沙丘！”，
“我们在这条乡间小路上静静地散步。”，
“海岸的夕阳！天空变成了可爱的橙色。”，
“我今天参观了一个山洞，下面的景色令人叹为观止。”，
“我穿过这片风铃草草地，在大雾来临之前，把山上的雪看得一清二楚。”
]
input.on（'keyup'，function（）{
常量inputValue=$（input.val（）.toLowerCase（）；
imgsMainWrap.children（）.hide（）；
const links=imgsMainWrap.find（“a”）.filter（“[data title*=”“+inputValue+”]）；
如果（links.length>0）{
links.parent（）.show（）；
}
// }
});
for（设i=1；i=9）{
links.attr（'href'，'photos/'+[i]+'.jpg'）；
}
$（链接）.appendTo（innerImgWrapper）；
常量img=$（'9）{
img.attr({
'src'：'photos/'+[i]+'.jpg'
});
}
$（img）.附件（链接）；
}
//接下来是有趣的部分。开始尝试寻找方法来检查
//搜索输入包含在任何标题中，如果是，则记录相关图像
//到控制台。
//option（）
嘿，这很管用。。。。非常感谢你，我很沮丧，因为我想不出来。。。谢谢！！！
[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}