首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Javascript -使用文本输入框过滤数据

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

Stack Overflow用户
提问于 2015-01-26 15:53:41
回答 1查看 7.7K关注 0票数 0

我正在尝试创建过滤函数,用户可以开始在输入框中键入文本,该函数将在用户键入时显示/隐藏数据。此外,它还需要组合两个或多个单词,但只显示具有这种组合的单词的结果,而不是显示可以找到单词的数据(因为该函数目前正在工作)。我正试图创造这段时间,我没有想法去做什么。

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

HTML:

代码语言:javascript
复制
<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>

联署材料:

代码语言:javascript
复制
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();
                }

        });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-26 16:33:17

代码语言:javascript
复制
return  words.reduce(function(previousValue, currentValue, index, array) {
                    return previousValue &&  data.indexOf(currentValue) > -1;
                     },true);

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

最后的真值是init值,它是数组中第一个值的previousValue。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28153683

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档