gpt4 book ai didi

Javascript - 使用文本输入框过滤数据

转载 作者:行者123 更新时间:2023-12-02 16:32:47 30 4
gpt4 key购买 nike

我正在尝试创建过滤功能,用户可以开始在输入框中输入文本,并且该功能将在用户输入时显示/隐藏数据。它还需要组合两个或多个单词,但仅显示具有该单词组合的结果,而不显示可以找到单词的数据(因为该功能目前正在运行)。我正在尝试创建这个,但我不知道该怎么做。

这是最后一个工作代码(JS Fiddle demo):

HTML:

<div class="gallery-search">
<input type="text" name="input-filter" class=form-control id="input-filter" placeholder="Search Here">
</div>
<div>
<a class="gallery" data-tags="chaos board nordic viking warriors display ship dock warhammer fantasy"></a>
<a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery gaming board wasteland warhammer 40k"></a>
<a class="gallery" data-tags="modular nurgle imperial chaos gaming board toxic crossroad warhammer 40k"></a>
<a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery warhammer 40k"></a>
<a class="gallery" data-tags="ork orc fort fortress modular palisade wood skaven scenery warhammer fantasy"></a>
</div>

JS:

var inputFilter = $('#input-filter');
inputFilter.on('keyup', function() {

var
$this = $(this),
search = $this.val().toLowerCase(),
words = search.split(/\s+/),
data;

if(search.length > 2){
$('.gallery').hide();
$('a[data-tags]').filter(function(){
// splitting the data-tags attribute to an array of words:
data = this.dataset.tags.split(/\s+/);

// looking to see if any of the words (from the value)
// are present in the array formed from the data-tags
// attribute, using Array.prototype.some() to iterate
// over the given array, returning a Boolean true or false:
return words.some(function (word) {
return data.indexOf(word) > -1;
});
}).show();
}

if(search == ''){
$('.gallery').show();
}

});

最佳答案

return  words.reduce(function(previousValue, currentValue, index, array) {
return previousValue && data.indexOf(currentValue) > -1;
},true);

http://jsfiddle.net/911hx0bd/5/

最后的 true 是初始值,它是数组中第一个值的 previousValue

关于Javascript - 使用文本输入框过滤数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28153683/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com