【问题标题】:Javascript - filtering data with text input boxJavascript - 使用文本输入框过滤数据
【发布时间】:2015-01-26 15:53:41
【问题描述】:

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

这是最后一个工作代码 (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();
                }

        });

【问题讨论】:

  • 那么你的实际问题是什么?
  • 为什么不直接使用库呢?我相信你在这里重新发明了轮子,虽然你的一些实现可能会起作用,但它可能不会像长期存在的开源项目那样高效。
  • @indubitablee - 搜索只做 OR 而不是 AND。
  • 我理解你正确吗?当您键入 2 个单词时,您只希望列表中包含两个单词的元素?
  • 是的,这就是我想要的,而目前情况并非如此。

标签: javascript jquery


【解决方案1】:
return  words.reduce(function(previousValue, currentValue, index, array) {
                    return previousValue &&  data.indexOf(currentValue) > -1;
                     },true);

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

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

【讨论】:

  • 这是有效的,但是当输入 空格 字符时仍然存在问题 - 此列表被隐藏。我会尽力解决这个问题。
  • 将 words=search.split(/\s+/) 改为 words = search.match(/\S+/g),匹配非空格
  • 解决了这个问题。谢谢你帮助我:)
猜你喜欢
  • 2011-04-13
  • 2021-11-02
  • 1970-01-01
  • 2016-09-27
  • 2015-12-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-03
相关资源
最近更新 更多