如何创建与输入文本匹配的搜索栏，并且仅显示在其属性中具有该文本的图像（href）？ jQuery

Question

[尝试创建搜索栏...当用户在输入字段中写入文本时，我只想显示那些在标题中包含该文本的图像（它们的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();

Answer 1

您可以使用数据属性选择器*，它在data- *属性中的任何位置查找匹配的字符。